/*!
 * (c) Unlimiteck Styles - main.css
 */

/* Sticky footer styles
-------------------------------------------------- */
/* avoid blurry fonts in chrome with zoom */
* {
-webkit-font-smoothing: antialiased !important;
}
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    margin: 0px;
}

footer {
    text-align: center;
    width: 100%;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-color: #ccc;
    font-size: 11px;
}

.footer {
    z-index: -990 !important;
}

.navbar {
    background-color: #283e52 !important;
    padding-left: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
}

.container-fluid > .navbar-header {
    margin-left: 0px;
}

.navbar-header, .navbar-brand{
    padding-left: 5px;
    margin-left: 0px;
}

#notebook-bar {
    padding-left: 5px;
    margin-left: 0px;
}

.navbar-right a {
    color: #999EA4 !important;
}

a.navbar-brand {
    color: #fff;
}

a {
    color: #51B4F5;
}

.ant-segmented-item {
    margin-bottom: inherit !important;
}

.dropdown-menu a {
    color: #434548 !important;
}

h1 {
}

h2 {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-color: #ccc;
    border-bottom: 0;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

code {
    font-size: 80%;
}

#react-list-projects-and-notebooks {
    padding-left: 0;
    padding-right: 0;
}

.CodeMirror {
    border: 1px solid #eee;
    height: auto !important;
    font-size: 14px;
    font-family: "Inconsolata" !important;
    font-color: #ccc;
}

.CodeMirror-vscrollbar {
   overflow-y: hidden;
}

.CodeMirror-sizer {
    padding-right: 0px !important;
}

.block-auto-size {
    display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

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

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

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

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

.mr-5 {
    margin-right: 5px;
}

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

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

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

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

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

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

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

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

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

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

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

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

.auto-resize {
    overflow: hidden;
}

/*.fill-parent {*/
    /*height: 100%;*/
    /*width: 100%;*/
/*}*/

.ml-15-important {
    margin-left: 15px !important;
}

.line-error {
    background: #FBC2C4 !important;
    color: #8a1f11 !important;
}

.line-volcano-0 {
    background: linear-gradient(to right, white, #fff2e8)!important;
}

.line-volcano-1 {
    background: linear-gradient(to right, white ,#ffd8bf) !important;
}

.line-volcano-2 {
    background: linear-gradient(to right, white ,#ffbb96) !important;
}

.line-volcano-3 {
    background: linear-gradient(to right, white , #ff9c6e) !important;
}

.line-volcano-4 {
    background: linear-gradient(to right, white , #ff7a45) !important;
}

.line-volcano-5 {
    background: linear-gradient(to right, white , #fa541c) !important;
}

.line-volcano-6 {
    background: linear-gradient(to right, white , #d4380d) !important;
}

.line-volcano-7 {
    background: linear-gradient(to right, white , #ad2102) !important;
}

.line-volcano-8 {
    background: linear-gradient(to right, white , #871400) !important;
}

.line-volcano-9 {
    background: linear-gradient(to right, white , #610b00) !important;
}

.line-volcano-10 {
    background: linear-gradient(to right, white , #610b00) !important;
}



.border-radius {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.overlay-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1100;  /* on top of bootstrap-navbar */
    box-shadow: 30px 30px 50px #eee;

}

.modal-body h1 {
    color: #666;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
}

.display-inline-block {
    display: inline-block;
    color: #0f0f0f !important;
}

.remove-padding-right {
    padding-right: 0 !important;
}

.show-pencil {
    display: none;
}
.show-pencil:hover {
    display: inherit;
}

.show-pencil:hover {
    cursor : text;
}

.hide-pencil:hover + .show-pencil {
    display: inline-block !important;
}

.hide-pencil:hover + span + .show-pencil {
    display: inline-block !important;
}

.react-grid-layout {
    position: relative;
    transition: height 200ms ease;
    min-height: calc(100vh - 112px);
}

.minimal-bar .react-grid-layout{
    position: relative;
    transition: height 200ms ease;
    min-height: 100vh;
}


.block p {
    margin: 0;
}

.react-grid-layout-edit.react-grid-layout-3k {
    width: 3840px;
}

.react-grid-item {
    transition: all 200ms ease;
    transition-property: left, top;
}

.react-grid-item.cssTransforms {
    transition-property: transform;
}

.react-grid-item.resizing {
    z-index: 1;
    will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
    transition: none;
    z-index: 3;
    will-change: transform;
}

.react-grid-item.react-grid-placeholder {
    background: black;
    opacity: 0.1;
    transition-duration: 100ms;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.react-grid-layout-edit .react-grid-layout .react-grid-item:hover .react-resizable-handle {
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: 0;
    right: 0;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
    z-index: 9999;
}


.react-grid-layout-edit .react-grid-layout .react-grid-item:hover {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.3); /* Darker and inset shadow on hover */ 
}

/** 
 * Call to action blink
 */
@keyframes blink-shadow {
  0%, 100% {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.3); /* Initial Shadow */
  }
  50% {
    box-shadow: none; /* Remove shadow to simulate blink */
  }
}

.react-grid-layout .react-grid-item .call-to-action {
  animation: blink-shadow 1s ease-in-out 0s 2; /* Duration and iteration count */
}

.react-rie-input {
    min-width: 4em;
    display: inline-block;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 0.5em;
    margin-right: 0.5em;
    padding: 0.25em 0.5em 0.25em 0.5em;
}

.height-100 {
    height: 100%;
}

.overflow-auto {
    overflow: auto;
}

/*.container {*/
    /*padding-left: 5px;*/
/*}*/


.container-full {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

#react-app {
    padding: 0px;
    min-height: 100%;
}

.white-icon {
    color: #eee;
}

.dark-icon {
    color: #666;
}

.hidden {
    display:none;
}

.pd-5 {
    padding: 5px;
}

.navbar-fixed-bottom {
}

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


/* notebook-menu */
@media (min-width: 768px) {
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: 0;
    }
}

span.navbar-brand:hover {
    border: 1px solid #e5e5e7 !important;
}

/* notebook-menu <<< */

/* tooltip >>> */
/* Tooltip container */
.html_tooltip {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    padding-right:0;

    border-bottom: 1px dotted #aaa; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.html_tooltip .html_tooltiptext {
    visibility: hidden;

    width: 300px;
    background-color: #555;
    color: #fff;
    padding: 7px;
    border-radius: 6px;
    line-height: 1.5;

    /* Position the tooltip text */
    position: absolute;
    bottom: 0;
    left: 100%;
    z-index: 9000;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.html_tooltip .html_tooltiptext::after {
    content: "";
    position: absolute;
    top: 35%;
    left: -5px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.html_tooltip:hover .html_tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 9000;
    /*top: 100%;*/
    right: 125%;
}
/* tooltip <<< */


/* Tables inside modal are scrollable >>> */
.scrollable-fixed {
    min-height: 100px;
    max-height: 340px;
    overflow-x: auto;
}
/* Tables inside modal are scrollable <<< */

.selector_container {
    display: inline-block;
    margin-right: 10px;
}
.selector_container label {
    margin-right: 10px;
}

.hotkey-hint {
    font-size: smaller;
    font-style: italic;
    text-transform: uppercase;
}

.divs-as-inline-block > div {
    display: inline-block;
}


/* Needed for Scoll Event Changes
 *******************************************/
.navbar {
	transition-duration: 0.1s;
}
.navbar-scroll-custom {
    transform: translateY(-102px);
    transition-duration: 0.7s;
}

#change-language-form input, #change-language-form select
    {
    margin-top: 4px;
    background-color: #444;
    border: 1px solid #444;
    color: #aaa;
    margin-left: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 25px;
}

.ReactCodeMirror {
    margin-bottom: 15px;
}

.clearer
{
    clear:both;
}

:focus
{
    outline: none !important;
}

.user_logo_min {
    max-width: 25px;
    max-height: 25px;
    display: inline-block;
}

.table-nowrap {
	table-layout:fixed;
}

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

}

.disable-row {
    background-color: #ECEFF1 !important;
    pointer-events: none !important;
}

/* Cursors */
.cursor-auto            { cursor: auto; }
.cursor-default         { cursor: default; }
.cursor-none            { cursor: none; }
.cursor-context-menu    { cursor: context-menu; }
.cursor-help            { cursor: help; }
.cursor-pointer         {
    cursor: pointer;
}
.cursor-progress        { cursor: progress; }
.cursor-wait            { cursor: wait; }
.cursor-cell            { cursor: cell; }
.cursor-crosshair       { cursor: crosshair; }
.cursor-text            { cursor: text; }
.cursor-vertical-text   { cursor: vertical-text; }
.cursor-alias           { cursor: alias; }
.cursor-copy            { cursor: copy; }
.cursor-move            { cursor: move; }
.cursor-no-drop         { cursor: no-drop; }
.cursor-not-allowed     { cursor: not-allowed; }
.cursor-all-scroll      { cursor: all-scroll; }
.cursor-col-resize      { cursor: col-resize; }
.cursor-row-resize      { cursor: row-resize; }
.cursor-n-resize        { cursor: n-resize; }
.cursor-e-resize        { cursor: e-resize; }
.cursor-s-resize        { cursor: s-resize; }
.cursor-w-resize        { cursor: w-resize; }
.cursor-ns-resize       { cursor: ns-resize; }
.cursor-ew-resize       { cursor: ew-resize; }
.cursor-ne-resize       { cursor: ne-resize; }
.cursor-nw-resize       { cursor: nw-resize; }
.cursor-se-resize       { cursor: se-resize; }
.cursor-sw-resize       { cursor: sw-resize; }
.cursor-nesw-resize     { cursor: nesw-resize; }
.cursor-nwse-resize     { cursor: nwse-resize; }

select {
    border: 1px solid #e5e5e7;
    margin: 0px 4px 0px 4px;
    height: 25px;
    background-color: white;
}

.paginate_button {
    border: 1px solid #e5e5e7 !important;
    color: white !important;
    margin: 0 !important;
    background: none !important;
    background-color: white !important;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

.paginate_button:hover {
    background-color: #2b83dd !important;
    border: 1px solid #2b83dd !important;
}

.paginate_button.disabled {
    background-color: #ededed !important;
    border: 1px solid #e5e5e7 !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
    color: #bcbcbc !important;
    border: 1px solid #e5e5e7 !important;
}

.paginate_button.current {
    background-color: #51B4F5 !important;
    border: 1px solid #51B4F5 !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    color: white !important;
}

.dataTables_wrapper label {
    font-family: 'Roboto' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #454545;
}

.dataTables_length, .dataTables_filter {
    margin-bottom: 10px !important;
}

.dataTables_info, .dataTables_paginate {
    margin-top: 15px !important;
    font-family: 'Roboto' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #454545 !important;
}

.dataTables_wrapper input[type=search]{
    padding: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #e5e5e7;
}

table.dataTable, .dataTable tr, .dataTable td, .dataTable th {
    border-collapse: collapse !important;
    border: 1px solid #e5e5e7 !important;
}

.dataTable thead {
    background-color: #fff;
    color: #292929;
}

.dataTable th {
    font-weight: 500 !important;
}

.dataTable tbody {
    color: #444444;
}

.dataTable tr:hover td {
    background-color: #e8f6ff !important;
}

#group-table_filter input {
    margin-left: 10px !important;
}

.dataTable thead th {
    border-bottom: 1px solid #e5e5e7 !important;
}


table.dataTable tr.odd, table.dataTable tr.odd th {
    background-color: white !important;
}

table.dataTable tr.even, table.dataTable tr.even th {
    background-color: #f8f8f8 !important;
}

table.dataTable tr.disable-row {
    background-color: #ededed;
    color: #888888;
    font-style: italic;
}

td[class*="sorting_"] {
    background-color: transparent !important;
}

table ul.rc-menu {
    border: 1px solid rgb(229, 229, 231);
}


.layoutGrid {
    margin-top: 7px !important;
}

/*Styles for the mineo logo and name of client in the header*/
.navbar .mineo-logo {
    padding-right: 3px;
    margin-top: 3px;
}
.navbar .mineo-text-brand {
    margin-left: 0px;
    color: white;
    letter-spacing: 2px;
    font-size: 15px;
    margin-bottom: 0px;
}
@media(max-width:767px){
    .navbar .mineo-logo {
        padding-right: 3px;
        margin-top: 4px;
    }
    .navbar .mineo-text-brand {
        display: block;
        margin-left: 0px;
        color: white;
        letter-spacing: 2px;
        font-size: 15px;
    }
}
@media(min-width:768px){
    .navbar .mineo-text-brand {
        float: left;
    }
}

.ant-form-item-label > label {
  margin-bottom: inherit;
  font-weight: inherit;
}

.user-submenu-container {
  left: unset !important;
  right: 0px !important;
}

/* Rule to avoid dark color on exceptions to improve readability */
.block-stderr-container *[style*="background-color:#A50"] {
background-color: var(--ant-color-warning-hover) !important;
}


/* notebook sidebar and layout interactions */
#main-layout.left-sidebar-collapsed {
  left: 0px;
  margin-left: 50px; 
}

#main-layout.left-sidebar-open {
  margin-left: min(400px, 90vw);
}

.mineo-dark {
  color-scheme: dark;
}