/*
 * General
 */

html {
    scroll-behavior: auto !important;
}

body {
}

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

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

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

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

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

.hilite {
    background-color: yellow;
}

div.snippet {
    font-family: monospace;
    white-space: pre;
    max-height: 20em;
    overflow: scroll;
}

.row.surfn-case:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.card-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 99;
}


[role="main"] {
    padding-top: 100px; /* Space for fixed navbar - mobile */
}

@media (min-width: 768px) {
    [role="main"] {
        padding-top: 60px; /* Space for fixed navbar - browser */
    }
    .nav-link {
        border-left: 1px solid rgba(0, 0, 0, 0.8);
    }    
    .card-sticky {
        top: 56px;
    }
}

a {
    color: #2780e3;
    text-decoration: none;
    background-color: transparent
}

a:hover {
    color: #165ba8;
    text-decoration: underline
}

a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

.form-group {
    margin-bottom: 1rem;
}

.form-divider {
    height: 0;
    margin: 1.0rem 1.0rem 1.5rem 1.0rem;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .3);
}

div.code {
    font-family: monospace;
    font-size: 0.9375rem;
    white-space: pre;
    line-height: 1.2em;
    overflow-y: hidden;
}

textarea.code {
    font-family: monospace;
    white-space: pre;
    line-height: 1.1em;
}

/*
 * Surfn application colors
 */

.bg-admin {
    background-color: rgb(214, 214, 214) !important;
}

.bg-bali {
    background-color: rgb(217, 179, 217) !important;
}

.bg-divers {
    background-color: rgb(255, 255, 192) !important;
}

.bg-kuta {
    background-color: rgb(255, 217, 141) !important;
}

.bg-lanai {
    background-color: rgb(192, 255, 192) !important;
}

.bg-palms {
    background-color: rgb(176, 229, 202) !important;
}

.bg-seas {
    background-color: rgb(255, 224, 192) !important;
}

.bg-waves {
    background-color: rgb(192, 224, 255) !important;
}

.bg-user {
    background-color: rgb(176, 229, 202) !important;
}

.bg-utilities {
    background-color: rgb(204,241,255) !important;
}

/*
 * Navbar
*/

.nav-link {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8) !important;
    padding: 0px 8px;
}

a.nav-link:hover, a.navbar-brand:hover {
    text-decoration: underline;
}

/*
 * login center box
 */

 #loginform {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 1.1rem;
    padding: 1rem 1rem 2rem 1rem;
    max-width: 500px;
}
  
/*
 * Server menu
 */

 .server-first {
    font-size: 2.34375rem;
    color:rgba(0, 0, 0, 0.8);
    font-weight: 400;
    text-align: center;
    padding: 1.5rem;
}

.server {
    font-size: 1.40625rem;
    color:rgba(0, 0, 0, 0.8);
    font-weight: 400;
    text-align: center;
    padding: .5rem;
}

.server-first:hover, .server:hover {
    background-color: rgba(0, 0, 0, 0.4);
    color: whitesmoke;
    text-decoration: none;
}

/*
 * Sidebar
 */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 60px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-sticky {
    position: fixed;
    top: 0;
    height: calc(100vh - 60px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar-sm {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 60px 0 0 0;
    display: block;
    box-shadow: inset -1px -1px -1px rgba(0, 0, 0, .1);
}


.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
    color: inherit;
}

.amenu {
    font-size: 1.1rem;
    font-weight: 600;
    font-color: rgba(0, 0, 0, .85);
}

.amenu-divider {
    height: 0;
    margin: 0.5rem 1.5rem;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .3);
}

.amenu-item,
.amenu-link {
    display: block;
    padding: .25rem 1.5rem;
}

.amenu-link {
    font-size: 90%;
    font-weight: 500;
    padding-left: 2rem;
    color: rgba(0, 0, 0, .65);
}

.amenu-link-s1,
.amenu-link-s2,
.amenu-link-s3 {
    display: block;
    padding: .25rem 1.5rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .65);
}

.amenu-link-s1 {
    font-size: 80%;
    padding-left: 3rem;
}

.amenu-link-s2 {
    font-size: 70%;
    padding-left: 4rem;
}

.amenu-link-s3 {
    font-size: 70%;
    padding-left: 5rem;
}

.amenu-link:hover,
.amenu-link-s1:hover,
.amenu-link-s2:hover,
.amenu-link-s3:hover {
    text-decoration: underline;
}

/*
 * Drag and Drop
 */

.grab {
    cursor: grab;
}
  
.draggable-table {
	position: relative;
    border-collapse: collapse;
    background: white;  
    .draggable-table__drag {
        position: absolute;
        width: 100%;
        border: 1px solid #f1f1f1;
        z-index: 10;
        cursor: grabbing !important;
        -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
                box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05); 
        opacity: 1;
    }  
    thead {
        th {
            user-select: none;
        }
    }
    tbody {
        tr {
            td {
                user-select: none;
                border-top: 1px solid whitesmoke;
            }
        }
        tr.is-dragging {
            background: #f1c40f;
            td {
                color: #ffe683;
            }
        }    
    }
}

/*
 * Modal
 */

.popout {
    float: right;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.popout:hover {
    color: #000;
    text-decoration: none;
}

a.popout {
    padding: 0 .25em;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a.close.disabled {
    pointer-events: none;
}

/*
 * Sub Reports
 */

.subreport {
    overflow-y: scroll;
}

.subreport-list {
    position: fixed;
    overflow-y: auto;
}

.subreport-list-item {
    padding: .25em;
    font-size: 0.9em;
}

.subreport-close {
    position: fixed;
    top:5px;
    right:35px;
}

/*
 * Surfn form elements
 */

.card-title, .card-header {
    font-weight: 600;
}

/* .show-form, .show-error {
    display: none;
}
 */
#editorStatusBar {
    bottom: 0;
    height: 22px;
    background-color: #f6f6f6;
}

#launchCasesBody {
    max-height: 75vh !important;
}

@media (max-height: 768px) {
    #launchCasesBody {
        max-height: 50vh !important;
    }
}