/*** GENERAL ***/
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
	touch-action: manipulation;
}
/* landing page: */

.navbar {
    background-color: #f6f6f6;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

.navbar-button {
    border-radius: 0.25rem;
    height: 45px;
    width: 130px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.navbar > .myCPcloud-logo > .myCPcloud-text {
    margin-left: 15px;
    margin-right: 15px;
}

.card-container {
    padding: 2%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    min-height: 30%;
    min-width: 100%;
    width: 100%;
}

.card-container > .card-text {
    margin-bottom: 5%;
}

.last-card {
    margin-bottom: 75px;
}
.card-text{
    margin: 5%;
    max-width: 700px;
    height:30%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.card-text h2{
    margin-bottom: 10%;
}
.card-text p{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.card-icon{
    margin: 5%;
    width: 50%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center
}
.card-icon i {
    color: #d8d8d8;
}
.white-card{
    background-color: #fff;
}
.dark-card{
    background-color: #f6f6f6;
}

a {
    color: rgb(123, 185, 41);
}

a:hover{
    color: rgb(123, 185, 41);
}

::-moz-selection {
   color:#fff;
   background: rgb(123, 185, 41);
   text-shadow: none;
}

::selection {
   color:#fff;
   background: rgb(123, 185, 41);
   text-shadow: none;
}

.display-none{
    display: none;
}

.display-flex{
    display: flex !important;
}

.display-inline{
    display: inline;
}

.display-block{
    display: block;
}

.position-relative{
    position:relative;
}

.overflow-auto{
    overflow:auto;
}

.margin-auto{
    margin: 0 auto;
}

.qr-center > div{
    margin: 0 auto !important;
}

.no-border{
    border-radius: 0;
}

.no-margin{
    margin: 0;
}

.no-padding{
    padding: 0;
}

.no-overflow{
    overflow: hidden;
}

.height-100{
    height: 100%;
}

.width-100-percent{
    width: 100%;
}

.width-50-percent{
    width: 50%;
}

.width-200{
    width:200px;
}

.padding-15{
    padding: 15px;
}

.no-padding-left{
    padding-left: 0;
}

.z-index-0{
    z-index:0 !important;
}

.nowrap{
    white-space: nowrap;
}

.noselect{
        -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.padding-5{
    padding: 5px;
}

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

.padding-left-20{
    padding-left: 20px;
}

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

.no-padding-desktop-5-padding-mobile{
	padding: 0;
}

.font-1-rem{
    font-size: 1rem !important;
}

.mt-10{
    margin-top: 10px;
}

.mt-20{
    margin-top: 20px;
}

.mt-30{
    margin-top: 30px;
}

.mt-40{
    margin-top: 40px;
}

.mt-50{
    margin-top: 50px;
}

.ml-10{
    margin-left: 10px;
}

.ml-20{
    margin-left: 20px;
}

.margin-bottom-5{
    margin-bottom: 5px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-20{
    margin-bottom: 20px;
}

.width-100{
    width: 100px;
}

.font-075{
    font-size:0.75em;
}

.font-090{
    font-size:0.9em;
}

.font-18px{
    font-size:18px;
}

.display-block{
    display: block;
}

.bg-white{
    background-color: white !important;
}

.display-inline-block{
    display: inline-block;
}

.color-white{
    color:#fff;
}

.float-right{
    float:right;
}

.float-left{
    float:left;
}

.cursor-pointer{
    cursor: pointer;
}

.cursor-default{
    cursor: default !important;
}

.no-pointer-events{
    pointer-events: none;
}

.border-none{
    border:0 !important;
}

.text-ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.span-ellipsis{
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle{
	outline: 5px auto rgb(123, 185, 41) !important;
}


/*** CI COLORS ***/

.icor-bg-color{
    background-color: rgb(160, 206, 78);
}

.icor-red-color{
    background-color: rgb(218, 83, 89) !important;
}

.icor-red{
    color: rgb(218, 83, 89);
}

.icor-color{
    color: rgb(123, 185, 41) !important;
}

.icor-darkgrey{
    color: #616161;
}

.bg-darkgrey{
	background-color:darkgrey;
}

.icor-darkgrey-border{
    border-color: #616161;
}

.icor-darkgrey-btn:hover{
	background-color: #616161;
    color: #fff;
}

.icor-darkgrey-btn:focus{
	outline: none;
	box-shadow: 0;
}

.icor-lightgrey{
    color: #BDBDBD;
}

.icor-radius{
    border-radius: 20px;
}

.color-white{
    color:white;
}

/* Buttons */

.icor-btn{
    color: #fff;
    border-color: rgb(160, 206, 78);
}

.icor-btn:disabled, icor-btn:hover:disabled{
    cursor: not-allowed;
	background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.icor-btn:hover{
    background-color: rgb(123, 185, 41);
    border-color: rgb(123, 185, 41);
    color: #fff;
}

.icor-btn:focus{
    box-shadow: 0 0 0 0.2rem rgba(123, 185, 41, 0.25);
}

.icor-btn:not(:disabled):not(.disabled):active{
    background-color: rgb(123, 185, 41);
    border-color: rgb(123, 185, 41);
}

.icor-btn:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 0.2rem rgba(123, 185, 41, 0.5);
}

.icor-critical-btn{
    color: #fff;
    border-color: rgb(218, 83, 89);
}

.icor-critical-btn:hover{
    background-color: rgb(187, 55, 66);
    border-color: rgb(187, 55, 66);
    color: #fff;
}

.icor-critical-btn:focus{
    box-shadow: 0 0 0 0.2rem rgba(187, 55, 66, 0.25);
}

.icor-critical-btn:not(:disabled):not(.disabled):active{
    background-color: rgb(187, 55, 66);
    border-color: rgb(187, 55, 66);
}

.icor-critical-btn:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 0.2rem rgba(187, 55, 66, 0.5);
}

.confirmation-buttons, .btn-sm{
	padding: 0.25rem 0.5rem !important;
	font-size:14px !important;
}

.confirmation-buttons > .btn-group > .btn-primary{
	border-color: rgb(218, 83, 89) !important;
	background-color:  rgb(218, 83, 89) !important;
}

/* Switch */

#view-switcher{
    margin: 9px -14px 0 0;
    z-index:0;
}


#view-switcher .btn-secondary{
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #616161;
}

#view-switcher > .btn-secondary.active{
    background-color: #616161;
    border-color: #545b62;
    color:white;
}

#view-switcher > .btn-secondary:focus, .btn-secondary.focus{
    box-shadow: none !important;
}


/* Form */

.icor-form:focus{
    border-color: rgb(123, 185, 41);
    box-shadow: 0 0 0 0.2rem rgba(123, 185, 41, 0.25);
}

.icor-form-no:focus{
    border-color: #ced4da !important;
    box-shadow: none !important;
}

/* Check Box */

.icor-checkbox{
    font-size: 15px;
}

.icor-checkbox label:after {
  content: '';
  display: table;
  clear: both;
}

.icor-checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
    top:2px;
}

.icor-checkbox .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 15%;
}

.icor-checkbox label input[type="checkbox"] {
  display: none;
}

.icor-checkbox label input[type="checkbox"] + .cr>.cr-icon {
  opacity: 0;
}

.icor-checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
  opacity: 1;
}

.icor-checkbox input[type="checkbox"]:disabled+.cr>.cr-icon {
	cursor: not-allowed;
}

.td-icor-checkbox-disabled{
	background-color: black;
    opacity: 0.1;
    cursor: not-allowed;
}


/* Modal */

.modal-xl{
    max-width: 1140px;
}

.modal-footer > .btn-secondary{
    font-size: 1rem !important;
}


/*** LOGIN - PAGE ***/

.bg-login {
    height:100%;
    background: #eeeeee;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

:root {
    --background-aquamarine: #7FFFD4;
    --boxshadow: #a1a1a1;
    --background-default: #f6f6f6;
    --background-white: #fff;
}

.login {
    background-color: #eeeeee;
    justify-content: center;
    align-items: safe center;
    display: flex;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}

.loginCardContainer {
    height: 65%;
    position: absolute;
    min-height: 350px;
    width: 65%;
    max-width: 1000px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 6.4px 12.8px 12.8px hsla(0, 0%, 29%, 0.3);
}

.loginContainer {
    width: 50%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: safe center;
    flex-direction: column;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #fff;
    padding: 2%;
    overflow-y: auto;
}

.loginContainer > .form-group {
    width: 90%;
    max-width: 300px;
}

.loginContainer > .login-options > .icor-checkbox {
    margin: 5%;
    margin-bottom: 0;
}

.loginCardContainer .myCPcloud-logo {
    display: none;
}

.logoContainer {
    width: 50%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-default);
    flex-direction: column;
    border-top-right-radius: 20px;
    border-end-end-radius: 20px;
}

.logoContainer > .myCPcloud-logo {
    height: 100%;
    width: 100%;
    display: contents;
}

.logoContainer > .myCPcloud-logo > .myCPcloud-img{
    width: 100%;
    height: 100px;
}

.logoContainer > .myCPcloud-logo > .myCPcloud-text{
    font-size: x-large;
}

.PwResetContainer {
    width: 50%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: safe center;
    flex-direction: column;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #fff;
    padding: 2%;
    overflow-y: auto;
}

.PwResetContainer > h1 {
    text-align: center;
}

.PwResetContainer > .form-group {
    width: 90%;
    max-width: 300px;
}

.centered-vh-login {
    width: 90%;
    max-width: 600px;
    background-color: white;
    text-align: center;
    padding: 50px;
    padding-inline: 7%;
    margin:auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-top-right-radius: 20px;
    border-end-end-radius: 20px;
    border-top-left-radius: 20px;
    border-end-start-radius: 20px;
    box-shadow: 6.4px 12.8px 12.8px hsla(0, 0%, 29%, 0.3);
}

.myCPcloud-img {
    width: 75%;
    height: 75%;
    min-height: 50px;
    background-image: url("../img/mycpcloud-logo-nn.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.myCPcloud-text{
    font-family: 'Poppins', sans-serif;
    color: rgb(220,92,16);
    letter-spacing: -1px;
    font-weight: 300;
    text-align: center;
    overflow: hidden;
}

.myCPcloud-text > b{
    font-weight:600;
}

.footer-login{
    position:fixed;
    bottom: 0;
    width: 100%;
    background-color:rgba(0,0,0,0.6);
    color: white;
    padding-right: 25px;
}

.footer-login > a {
    margin: 0 8px;
    color:white;
}

.centered-vh-infobox {
    width: 90%;
    background-color: white;
    text-align: left;
    padding: 20px;
    margin:auto;
    margin-top: 50px;
    margin-bottom: 100px;
    position: relative;
    box-shadow: 6.4px 12.8px 12.8px hsla(0, 0%, 29%, 0.3);
}

/*** STRUCTURE - CLOUD ***/

.popover-body{
    text-align: center;
}

.icor-container{
    /* overflow: hidden; */
    display: flex;
    height:100%;
    /* flex-direction: row; */
}

.icor-menu{
    /* height: 100vh; */
    height: 100%;
    width: 180px;
    min-width:180px;
    background-color: #E0E0E0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    -webkit-transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

.icor-menu > hr{
    width: 100%;
}

.icor-menu > .myCPcloud-text {
    font-size:20px;
}

.icor-menu-dots{
    display: inline-block;
    line-height: 50px;
    color: white;
    font-size: 1.5em;
}

.icor-menu-dots-list {
    text-align: left;
    font-size: 1.1em;
    width:auto;
    list-style: none;
    padding: 0;
    margin: -5px 0 0 0;
}

.icor-menu-dots-list > li {
    margin-top: 5px;
    white-space: nowrap;
}

.icor-menu-dots-list > li > a  {
    color:grey;
}

.icor-menu-minified{
    width:40px;
    min-width:50px;
}

.icor-menu-footer.icor-menu-minified{
    min-width: 40px;
}

.icor-menu-minified > .no-margin-hr{
    margin-top: 8px;
}

.icor-menu-minified > .icor-menu-header{
    height: 36px;
}

.icor-menu-minified > .myCPcloud-logo > .myCPcloud-img{
    height: 100%;
}

.icor-menu-minified > ul {
    padding: 0;
    text-align: center;
}

.icor-menu-list {
    padding: 0 0 0 12.5%;
    text-align: left;
    font-size: 1.1em;
    line-height: 2;
    flex-grow: 1;
    overflow: hidden;
    width:auto;
}

.icor-menu-list > li {
    list-style:none;
    margin-top:5px;
    width: auto;
    white-space: nowrap;
}

.icor-menu-list > li > a{
    color: grey !important;
    white-space: nowrap;
    cursor:pointer;
}

.icor-menu-list > li > a > i{
    min-width:25px;
    text-align: center;
}

.icor-menu-version {
    padding: 0 0 0 0;
    text-align: center;
    font-size: 0.8em;
    line-height: 1;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    color: rgba(0, 0, 0, 0.3);
}

.icor-menu-header{
    height: 100px;
    width:100%;
    font-weight: 200;
    font-size: 20px;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}

.icor-menu-header > b{
    font-weight:400;
}

.icor-menu-header-content{
	margin:0;
	max-width:100%;

}

.icor-inner-container{
    /* flex: 1;*/
    display:flex;
    flex-direction: column;
    /* overflow:hidden;*/
    height: 100%;
}


.icor-content-section{
	width: calc(100% - 170px);
	flex-direction: row;
}


.icor-content-section-big{
	width: calc(100% - 50px);
}

.icor-header{
    height: 50px;
    width: 100%;
    display:flex;
    z-index:0;
}

.icor-header > .container {
    padding: 0 30px;
}

.icor-header > .container > .row > .col-3 {
        display:none;
}

.icor-mobile-hamburger{
    display:none;
    line-height: 50px;
    color: white;
    font-size: 1.5em;
}

.icor-mobile-menu{
    position: absolute;
    width:180px !important;
    padding:5px !important;
}

#dynamic-container--loading{
	z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.25);
}

.dynamic-container--loading--wrapper{
	position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 150px);
    text-align: center;
    color: white;
}

.spinner-grow-container{
	position:relative;
	top:5px;
}

.overlay-active, .overlay-active-port {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
    color:white;
}

.overlay-active__center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.overlay-active__center > i {
    font-size: 2.5em;
    margin-bottom: 0.5em;
    animation:spin 4s ease-in-out infinite;
}

.overlay-active-port > .overlay-active__center > i {
    animation:backspin 4s ease-in-out infinite;
}

/* Keyframes for Animation to rotate phone */

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    50% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); }
    100% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); }
}

@keyframes backspin {
    0% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); }
    50% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
}

.icor-site-section{
    font-size: 18px;
    line-height: 48px;
}

.icor-site-section > a {
    margin: 0 5px;
}

.icor-site-section > span {
    color:white;
}

#icor-site-selection-text > a{
    text-decoration: underline;
    color:white;
}

.icor-content{
    display: flex;
    flex: 1;
    background-color: #fff;
    max-height: calc(100% - 50px);
	height:100%;
    /* max-width: calc(100vw - 180px);*/
    width:100%;
}

.icor-content-helper{
    max-width: 100vw;
}

#collapse-btn:focus{
    box-shadow: none;
}

/*** DASHBOARD ***/

.icor-dashboard{
    padding: 20px;
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100%;
}

.card-dashboard{
    padding:0;
    border-radius:0;
}

.card-graphs{
    height:220px;
}

.log-name{
    max-width: 60%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-time{
    float:right;
    font-size: 0.9em;
    color: grey;
    text-rendering: optimizeLegibility;
    line-height:20px;
    padding: 0 5px
}

.dashboard-tile-title{
    font-size: 18px;
    font-weight: 700;
    color: grey;
    height:55px;
    line-height:3
}

.dashboard-tile-value{
    font-size: 36px;
    font-weight: 600;
    height:55px;
    line-height: 0.75
}

.map-container{
    margin-bottom: 20px;
}

#mapid{
    width: 100%;
    height:600px;
    z-index: 0;
}

#myTable > thead > tr > th{
    font-size:14px;
	white-space: nowrap;
	position: sticky;
    top: 0;
    z-index: 5;
    background: white;
}

#myTable > tbody > tr > td{
    padding: 5px 6px 2px 6px;
    font-size: 12px;
}

#myTable > tbody > tr > .action-button-cell{
    padding-top: 3px;
}

#valueTable > thead > tr > th{
    font-size: 14px;
    padding: 12px 5px;
	position: sticky;
    top: 0;
    z-index: 5;
    background: white;
}

#valueTable > tbody > tr > td, td:focus{
    padding: 6px;
    font-size: 12px;
    outline: none;
}

#one {
    overflow: hidden;
	width:100%;
}

#two {
	display: none;
    overflow: auto;
}

/*** SEARCH ***/

#load-more:hover{
    background-color: rgba(0, 0, 0, 0)!important;
}

.table.table-hover{
    margin-bottom:0px;
}

#searchView > tr > td {
	white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
}

/*** USERS ***/

.users-icor-card{
    width: 100%;
    margin: 30px auto;
    max-width: 992px;
}

.icor-detail-card{
	display:none;
	width:50%;
	height: calc(100% - 59px);
}

.icor-detail-card > .modal-content{
	overflow: auto;
	height: 100%;
	border: none;
}

.icor-detail-card button[data-dismiss="modal"] {
	display: none;
}

.icor-detail-card .modal-body{
	flex: none;
}

.users-icor-card > .table-container > .table {
    margin-top: 15px;
    padding: 0 30px;
}

.users-icor-card > .table-container > .table > tbody > tr > td {
    border-top: 0;
}

.users-icor-card > .table-container > .table > tbody > tr > .text-left {
    padding-top: 18px;
}

.users-icor-card > .table-container > .table > tbody > tr > .text-center > input {
    max-width: 500px;
    margin: 0 auto;
}

.users-icor-card > .table-container > .card-body {
    padding: 0;
    overflow: auto;
}

.users-icor-card > .table-container > .card-body > table {
    font-size:0.9em;
}

.bs-searchbox > .form-control:focus {
    border-color: rgb(123, 185, 41);
    box-shadow: 0 0 0 0.2rem rgb(123 185 41 / 25%);
}

.dropdown-menu.inner.show > li.selected > .dropdown-item.active,
.dropdown-menu.inner.show > li > .dropdown-item:active{
	background-color: rgb(160, 206, 78);
}

/* Role management */

#actual-roles-list{
	max-height: 180px;
    overflow-y: auto;
}

.table-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    width: 100%;
    overflow:hidden;
}

.display-none-768 > b {
    line-height: 38px;
}

#user-setting-newpassword{
    text-align: center;
}

#user-setting-newpassword > .form-group, #user-setting-newpassword > .form-group > .form-control{
    font-size:0.9em !important;
    text-align: left;
    font-weight: 400 !important;
}

#UserSettingsModal label{
    font-weight: 400;
}

#modal-success, #modal-alert, #modal-user-success, #modal-user-alert, #modal-role-alert {
    display: none;
    -webkit-transition:opacity 1000ms ease-out;
    -moz-transition:opacity 1000ms ease-out;
    -o-transition:opacity 1000ms ease-out;
    transition:opacity 1000ms ease-out;
}

.alert-footer{
	line-height:12px;
}

/*** PROJECTS ***/

.project-locked{
    background-color: #FFF176 !important;
}

.action-target, .action-target:active, .action-target:hover{
    color:black;
    outline: none;
}

/*** PROJECT VIEW ***/

.project-cards{
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0px;
    overflow:auto;
}

.project-cards > article {
    display:flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    width:100%;
}

.project-cards > article > header {
    min-height: 40px;
    background-color:#e0e0e0;
    padding: 8px 8px 8px 15px;
}

.project-cards > article > header > a > i {
    float:left;
    font-size: 24px;
}

.project-cards > article > header > span {
    font-weight: 500;
}

.project-cards > article > section {
    width: 100%;
    height: auto;
}

.node-header-mobile{
	padding-right:0;
    display: none;
}

#show-saved-attributes{
    text-align: right;
    font-size: 14px;
    opacity: 0;
}

.full-size-btn{
    font-size: 12px;
    width:100%;
    height:40px;
    border-radius:0;
    border:0;
    margin:0;
}

.icor-btn-project{
    background-color: rgb(160, 206, 78);
    border: none;
    min-width:58px;
    z-index:0 !important;
}

.icor-btn-project:hover{
    background-color:#7bb929;
}

.icor-input-project{
    border-bottom-width:0;
    border-top-width:1px;
    border-color: rgba(0, 0, 0, 0.125);
    border-left: none;
    border-right: none;
}

.icor-btn-project:focus, .icor-input-project:focus{
    box-shadow:none !important;
    border-color: rgba(0, 0, 0, 0.125);
    z-index:0 !important;
}

.btn-light, .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle{
    background-color: #fff;
    border-color: #ced4da;
}

.project-cards.project-cards-content > article > header {
    font-size: 18px;
    padding: 0 0 0 15px;
    line-height:38px;
}

.project-dropdown-menu{
    min-width:59px;
    left:-5px !important;
    text-align: left;
    border-radius: 0px;
}

.project-dropdown-menu > a{
    padding: 0.25rem 0.5rem;
}

.project-dropdown-menu > a:active,.project-dropdown-menu > a:focus{
    background-color: rgb(160, 206, 78);
    color:white !important;
}

.project-dropdown-node-button{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.project-dropdown-node-menu{
    min-width: 59px;
    text-align: center;
    left:-2px !important;
    border-radius:4px;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.project-cards-content{
    overflow-x:hidden;
}

.project-cards.project-cards-content > article > header > span{
    margin-left:7px;
    font-weight: 400;
}

.project-cards.project-cards-content > article > section{
    padding:15px;
}

.fluid-content-wrapper{
    flex:1;
    overflow:auto;
}

.mycp-data__text {
	padding: 5px 20px;
    font-size: 1rem;
}

.mycp-data__text > i{
	font-size: 24px;
}

.mycp-data__text > span{
    display: inline-block;
    vertical-align: 4px;
}

#tree {
    flex:1;
    overflow-y:hidden;
}

#tree > ul {
    height:100%;
}

.information-group{
    margin-bottom: 15px;
}

.information-group > label {
    margin:0;
}

.toggle{
    margin: 8px 0 0;
}

.toggle-handle{
    background-color:white;
}

.toggle.off{
    background-color:#9E9E9E;
    color:white;
}

.toggle.btn-primary{
    background-color: #7bb929;
    border-color: #7bb929;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, toggle-on:active, .btn-primary:not(:disabled):not(.disabled):active{
    background-color: #7bb929;
    border-color: #7bb929;
}

.btn-secondary{
    font-size:12px;
}

#dropdown-project-node-item:focus{
    box-shadow:none;
}

.daterangepicker.ltr.single.opensright.show-calendar{
	position: fixed !important;
	opacity: 0;
}

/*** LIVE DATA TABLE ***/

#header-livedata{
    font-size:12px;
    overflow-y: auto;
}

#header-livedata > th {
    position: sticky;
    top: -1px;
}

#body-livedata{
    font-size:12px;
    padding:0;
	white-space: nowrap;
}

/* Header column (first column) settings */
.live-data-header-column {
    white-space: nowrap; /* Prevent text from wrapping */
    width: auto; /* Allow the column to expand as needed */
    max-width: none; /* Remove any maximum width restrictions */
    min-width: 150px; /* Ensure the column has a reasonable minimum width */
    overflow: visible; /* Ensure text is never cut off */
    font-weight: bold; /* Optional: Make the header column text bold */
}

/* Fixed width for all columns */
.livedata-column {
    width: 100px; /* Set the desired fixed width */
    max-width: 100px;
    min-width: 100px;
    word-wrap: break-word; /* Ensure text wraps if it exceeds the width */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

.live-data-table th,
.live-data-table td {
    border: 1px solid #ddd;
    padding: 0.2rem;
}

/* livedata-highlight the first data column */
.livedata-highlight {
    background-color: #f0f0f0; /* Light gray background */
    font-weight: bold;
}

/*** AUTO DETECT DEVICE ***/

#autodetect-device-table{
    line-height:30px;
}

/*** DATAPOINT VIEW ***/

#panel-t{
    height:calc(100vh - 50px);
    width: 100%;
    padding:15px;
	position:relative;
}

.btn-datapoints,  .btn-datapoints:focus{
    background-color: rgb(132, 178, 50);
    border: 0px;
    box-shadow: none !important;
    font-size:14px;
    outline: none;
}

.btn-datapoints:hover {
    background-color: rgb(105, 151, 18) !important;
}

.show > .btn-datapoints.dropdown-toggle {
    background-color:  rgb(105, 151, 18) !important;
}

.informational-button{
	background-color: #FDD835 !important;
}

.informational-button:hover{
	background-color: #F9A825 !important;
}

.dropdown-menu-datapoints{
    line-height: 1.25;
    min-width: 100px;
    font-size:14px;
}

.dropdown-menu-datapoints > .dropdown-item:active{
    background-color:lightgray
}

.nodeselect{
    line-height:23px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
    margin-bottom:0;
}

.nodeselect-cb{
    line-height:30px;
}

.nodeselect-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

#dropdownNodeSelection{
    width:500px;
}

#nodeselect-matrix_wrapper{
	height:480px;
}

.nodeselect-wrapper{
	font-size: 0.7em;
}

#nodeselect-matrix td{
	white-space: nowrap;
	padding: 0.25rem;
}

#nodeselect-matrix .nodeselect-cb{
	width: 21px;
	margin: auto;
}

#nodeselect-matrix th{
	cursor: pointer;
	position: sticky;
    top: 0;
    background-color: white;
    z-index: 5;
}

.nodeselect-nodename:not(th){
	font-size: 1.15em;
    line-height: 25px;
	cursor: pointer;
}

#dropdownSettings{
    width:500px;
    padding: 15px 30px;
}

/*** Chart Settings ***/

.count-slidecontainer{
	width:100%;
}

#count-range{
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#count-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7bb929;
  cursor: pointer;
}

#count-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7bb929;
  cursor: pointer;
}

.seperator-line-height{
    line-height:35px;
}


.modal-fix-height {
    height: 90%;
}

.modal-width-95 {
    max-width: 95%;
}

.modal-body-fix-height {
    max-height: calc(100% - 120px);
	height:100%;
}

.panes-container {
    display: flex;
    width: 100%;
}

.split, .gutter.gutter-horizontal {
    float: left;
}

.gutter.gutter-horizontal {
    cursor: ew-resize;
    background-color:lightgrey;
}

.modal-measurements-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.25);
    z-index: 500;
	display:none;
}

.modal-measurements-overlay--active{
	display:block;
}

.modal-measurements-overlay--active > .modal-measurements-overlay__loading-container{
	position: absolute;
    top: 45%;
    left: 50%;
    text-align: center;
	color:white;
}

#myTable_wrapper{
	margin-right: 12px;
	white-space: nowrap;
}

.myTable-wrapper{
    height: calc(100% - 162px);
	overflow-y: scroll;
}

#myTable_filter{
	display: none;
}

#nodeselect-matrix_filter{
	display:none;
}

#valueTable{
    width: 100% !important;
	white-space: nowrap;
}

#valueTable_wrapper{
    margin-left: 12px;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: rgb(160, 206, 78) !important;
}

div table.dataTable {
	margin-top: 0px !important;
}

#myDatapoints{
    padding-left: env(safe-area-inset-left);
}

/*** Help System ***/

.help-content{
    width: 100%;
}

.help-image-center{
    width: 50%;
    margin: 10px auto;
    display:block;
}

.help-image-left{
    width: 50%;
    margin: 10px auto;
}

#help-system-directory > ol > li {
    color: rgb(123, 185, 41) !important;
    cursor:pointer;
}

/*** MEDIA QUERIES ***/

@media (min-width: 1680px){
    .users-icor-card{
        margin: 30px 15px 30px 30px;
    }

	.icor-detail-card{
         margin: 30px 30px 30px 15px;
		display:block;
    }
}

@media only screen and (max-width: 1280px){
    .users-icor-card{
        margin: 30px;
        max-width: unset;
    }

}

@media only screen and (max-width: 991px){
    /*** DASHBOARD ***/

    .mt-20-mobile{
        margin-top: 20px;
    }

    .no-padding-left-mobile{
        padding-left: 0 !important;
    }

    .no-padding-right-mobile{
        padding-right: 0 !important;
    }

    /*** USERS ***/

    .col-mobile-off{
        display:none;
    }

    /*** PROJECT VIEW ***/

    .display-991{
        display: block;
    }

    .no-padding-left-treeview{
        padding-left:15px !important;
    }

	#text-project-item{
		font-size:16px;
	}

    #node-card{
        display: none;
    }

    /*** HELP SYSTEM ***/

    .help-image-center{
        width: 100%;
    }

    .help-image-left{
        width: 100%;
    }

	/*** Search ***/

	#searchView > tr > td {
		max-width: 150px;
	}

	.icor-content-section{
		width:100%;
	}


	/*** DATAPOINTS ***/

	.modal-fix-height--mobile{
		height: 150%;
	}
}

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

    body{
        overflow-y:auto;
    }

    /*** PROJECT VIEW ***/
    .project-cards-hidden-768{
        display:none;
    }

    .display-none-768{
        display:none;
    }

    .treecontainer-mobile > .card > article > header{
        text-align: center !important;
    }

	.mycp-data__text {
		margin-bottom:0.5em;
	}

    /*** DASHBOARD ***/

    .no-padding-left-mobile-small{
        padding-left: 0 !important;
    }

    .no-padding-right-mobile-small{
        padding-right: 0 !important;
    }

    .mt-20-mobile-small{
        margin-top:20px;
    }

    /*** LOGIN ***/

    .loginContainer > .form-group > label{
        font-size:0.8em;
    }

    .loginContainer > .form-group {
        margin-bottom:0.5rem;
    }

    .footer-login, .footer-login > a{
        display:block;
        text-align: center;
        font-size:12px;
        padding-right: 0;
    }

    .login {
        width: 100%;
        height: 100%;
        position: relative;
        overflow-y: auto; /* Allow vertical scrolling */
        margin-bottom: 40px;
    }

    .loginCardContainer {
        width: 90%;
        max-width: 400px; /* Ensure a max-width for better design */
        margin: 5% 0;
        flex-direction: column;
        justify-content: space-between; /* Ensure space is distributed evenly */
        background-color: var(--background-white, #fff);
        border-radius: 2rem; /* Rounded corners */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        overflow: hidden; /* Prevent content overflow */
        height: unset;
        min-height: unset;
        position: unset;
        margin-bottom: 30%;
    }

    .loginContainer{
        width: 100%;
        padding: 5%;
    }

    .logoContainer {
       display: none;
    }

    .loginCardContainer .myCPcloud-logo {
        display: unset;
    }

    .loginCardContainer .myCPcloud-logo > .myCPcloud-img {
        width: 100%;
        min-height: 100px;
    }

    .loginCardContainer .myCPcloud-logo > .myCPcloud-text {
        font-size: x-large;
    }

    .PwResetContainer{
        width: 100%;
        padding: 5%;
    }
}

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

    /* Landing page */
    /* body {
        background-color: lightblue;
    } */

    .navbar {
        padding: 10px 20px;
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navbar a {
        margin-right: unset;
        margin-top: 15px;
    }

    .navbar > .navbar-filler {
        display: none;
    }

    .navbar > .myCPcloud-logo {
        width: 100%;
    }

    .card-container{
        flex-direction: column;
    }
    .card-text{
        margin-bottom: 0;
    }
    .card-icon{
        margin-top: 0;
        margin: 10%;
    }
    .card-icon i {
        /*scale: 3;*/
    }

    /*** CLOUD STRUCTURE ***/

    .icor-content{
        /*max-height: 100vh;*/
		height: 100%;
        max-width: 100%;
    }

    .icor-mobile-hamburger{
        display:inline-block;
    }
    .icor-menu{
        height:100%;
        position:absolute;
        width:0;
        padding:0;
        z-index: 100;
        min-width:0;
    }

    #collapse-btn{
        display:none;
    }

    .icor-site-section{
        display: inline-block;
    }

    .icor-header > .container > .row > .display-none {
        display: inline-block;
    }

    .icor-header > .container > .row > .col-8 {
        text-align: center;
    }

    .clickable-box{
        position:absolute;
        width: 100%;
        overflow:hidden;
    }

     /*** USERS ***/

    .card.users-icor-card{
        margin:0;
        border:none;
    }

    .users-icor-card > table {
        font-size: 0.75em;
    }

    .users-icor-card > .table-container > .card-body > table {
        font-size:0.70em;
    }

    .users-icor-card > .card-body > table > tbody > tr > td {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .users-icor-card > .table > tbody > tr > .text-center > input {
        font-size:0.8em;
    }

    .users-icor-card > .table > tbody > tr > .text-right > button {
        font-size:0.8em;
    }

    .table-container{
        position:relative;
    }

    .font-075-576{
        font-size:0.75em;
    }

    .font-090-576{
        font-size:0.90em;
    }

    .table--container-pading{
        padding: 0 10px !important;
    }

	.col-mobile-xs-off{
        display:none;
    }

	.no-padding-desktop-5-padding-mobile{
		padding-left: 5px;
	}

    /*** DASHBOARD ***/

    .icor-dashboard{
        max-width: 100vw;
    }

    /*** TREEVIEW ***/
    .treecontainer-mobile{
        padding: 0px;
    }

	/*** RAW Values ***/

	#default-modal-body{
		padding:0;
		white-space: nowrap;
	}


}

/* TREEVIEW */

.treeview .list-group-item {
	cursor: pointer;
        user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.no-padding-left-treeview{
    padding-left: 0;
}

.treeview span.indent {
	margin-left: 10px;
	margin-right: 10px;
}

.treeview span.icon {
	width: 12px;
	margin-right: 10px !important;
}

.treeview .node-disabled {
	color: silver;
	cursor: not-allowed;
}

#node-header > a {
    display:inline-flex;
}

.project-dropdown-menu > a {
    cursor: pointer;
}

.text-vertical-align > h3, h4{
	font-weight: 300;
}

/* Override Bootstrap */

.btn-sm, .btn-group-sm > .btn {
	padding: 0.25rem 0.25rem;
}

.btn-action {
	padding: 0.1em 1em;
    font-size: 0.9em;
	height: 23px;
    line-height: 1px;
}

/* modal for mulitple node changes */

.modal-dialog.modal-lg {
    max-width: 33%;
    width: 500px;
}

.custom-control-label {
    cursor: pointer;
    user-select: none;
}
.custom-switch .custom-control-label::before {
    background-color: #007bff;
    border-color: #007bff;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: #9be7ac;
    border-color: #9be7ac;
}

/* help icon for multiple node changes */

.icon {
    margin-left: 5px;
    font-size: 0.9em;
}

.icon:hover {
    cursor: help;
}