:root {
    --primary-color : #2499b8;
    --primary-hover-color : #2bb0d4;
    --primary-background-color: #3d454d;
    --primary-bright-background-color : #4f5d6b;
    --primary-hover-bright-background-color : #617283;
}

html, body {
    width:100%;
    min-height:100%;
    margin:0;
}

body {
    font-size: 12px;
    /* background: linear-gradient(178deg, var(--primary-background-color), var(--primary-background-color)); */
    background: #EBF0F3;
    background-attachment:fixed;
    font-family:'Open sans', sans-serif;
    position:relative;
    overflow-y: scroll;
}
h1 {
    text-transform:uppercase;
    font-family:Montserrat;
    color:#444;
    font-weight:300;
    margin-top:10px;
    margin-left:20px;
    margin-bottom:0;
    font-size: 30px;
}
h1 .brand {
    color: #2499b8;
    font-size: 0.65em;
}
select.num-cols {
    float:right;
    /* margin-top:10px; */
    margin-right:20px;
    border-radius:4px;
    padding:4px;
}
.dashboard {
    padding:0px 10px 10px 10px;
    display:flex;
    flex-wrap:wrap;
    /* gap:20px; */
    position:relative;
    width:calc(100% - 20px);
}
.dashboard-item {
    width:33.3333%;
    /* margin:20px; */
}
.dashboard[data-num-cols="1"] .dashboard-item {
    width:100%;
}
.dashboard[data-num-cols="2"] .dashboard-item {
    width:50%;
}
.dashboard[data-num-cols="3"] .dashboard-item {
    width:33.3333%;
}
.dashboard[data-num-cols="4"] .dashboard-item {
    width:25%;
}
.panel {
    /* padding:15px; */
    border-radius:4px;
    overflow:hidden;
    margin:10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.panel-heading {
    background:var(--primary-bright-background-color);
    color:#fff;
    padding:10px;
    text-transform:uppercase;
    font-family: Montserrat;
}
.panel-heading a {
    text-decoration:none;
    color:inherit;
}
.panel-heading a:hover {
    text-decoration:underline;
}
.num-users {
    font-family: Montserrat;
    float:right;
    font-weight:600;
    /* border:solid 1px #ddd; */
    background:var(--primary-color);
    border-radius:50%;
    width:21px;
    height:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-3px;
    margin-right:-3px;
    font-size:11px;
}
.panel-body {
    background:#fff;
    /* padding:10px; */
    height:200px;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
}
table {
    border-collapse:collapse;
    width:100%;
    table-layout: fixed;
}
th,
td {
    border-bottom:solid 1px #ddd;
    padding:6px 6px 6px 15px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    vertical-align:top;
}
.dashboard[data-num-cols="4"] th,
.dashboard[data-num-cols="4"] td {
    padding-left:10px;
    padding-right:0;
}
th {
    text-transform:uppercase;
    background:var(--primary-color);
    color:#fff;
    font-family: Montserrat;
    font-weight:500;
    text-align:left;
    /* display:none; */
}
tr:hover td:not(.group-name) {
    background:#D2EDF5;
}
.group-name {
    /* vertical-align:top; */
    border-right:solid 1px #ddd;
    text-transform:uppercase;
    font-size:10px;
    margin-bottom:2px;
    vertical-align:top;
    width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dashboard[data-num-cols="2"] .group-name {
    width:140px;
}
.dashboard[data-num-cols="4"] .group-name {
    width:50px;
}
.user-name {
    font-weight:600;
    width:140px;
}
.dashboard[data-num-cols="2"] .user-name {
    width:200px;
}
.dashboard[data-num-cols="4"] .user-name {
    width:120px;
}
.user-name .name {
    text-transform:uppercase;
}
.user-name .surname {
    font-weight:normal;
}
.user-urls {
    padding-left:10px;
    display:flex;
    flex-direction:column;
}
.user-urls .btn-masquerade {
    float: right;
    margin-right: 3px;
    color: #2499b8 !important;
    opacity:.5;
}
.user-urls .btn-masquerade:hover {
    opacity:1;
}
.user-urls a {
    color:inherit;
    text-decoration:none;
}
.user-urls a:hover {
    text-decoration:underline;
}
.dashboard[data-num-cols="4"] .user-urls {
    padding-left:5px;
}

.ganesh-loading {
        display: inline-block;
        position: absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%) translateY(-50%);
        width: 80px;
        height: 80px;
}
.ganesh-loading div {
        position: absolute;
        width: 20.3125%;
        height: 20.3125%;
        border-radius: 50%;
        background: #013F51;
        animation: ganesh-loading 1.2s linear infinite;
}
.ganesh-loading div:nth-child(1) {
        top: 9.375%;
        left: 9.375%;
        animation-delay: 0s;
}
.ganesh-loading div:nth-child(2) {
        top: 9.375%;
        left: 40.625%;
        animation-delay: -0.4s;
}
.ganesh-loading div:nth-child(3) {
        top: 9.375%;
        left: 70.3125%;
        animation-delay: -0.8s;
}
.ganesh-loading div:nth-child(4) {
        top: 40.625%;
        left: 9.375%;
        animation-delay: -0.4s;
}
.ganesh-loading div:nth-child(5) {
        top: 40.625%;
        left: 40.625%;
        animation-delay: -0.8s;
}
.ganesh-loading div:nth-child(6) {
        top: 40.625%;
        left: 70.3125%;
        animation-delay: -1.2s;
}
.ganesh-loading div:nth-child(7) {
        top: 70.3125%;
        left: 9.375%;
        animation-delay: -0.8s;
}
.ganesh-loading div:nth-child(8) {
        top: 70.3125%;
        left: 40.625%;
        animation-delay: -1.2s;
}
.ganesh-loading div:nth-child(9) {
        top: 70.3125%;
        left: 70.3125%;
        animation-delay: -1.6s;
}
@keyframes ganesh-loading {
        0%, 100% {
                opacity: 0.5;
        }
        50% {
                opacity: 0.2;
        }
}