/* Page Layout */
.container {
  min-width: 95% !important;
}

/* Page Header */
.title {
  color: orange;
  font-size: 1.2em;
}

/* Tags */

.dot {
  height: 20px;
  width: 20px;
  background-color: #bbb;
  float: left;
  margin-top: 4px;
  margin-right: 0px;
}
.dot-right {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.dot-left {
  border-top: 1px solid black;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

/* Misc */

.inline-icon {
  vertical-align: bottom;
  font-size: 20px !important;
}

.selected {
  border: 2px dotted orangered !important;
}

.delete-tag:hover {
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
}

.toolbar {
  background-color: whitesmoke; 
  border-bottom: 1px solid gray;
  margin-bottom: 10px !important;
  padding: 10px;
}

.vertical {
  height: 100vh;
}

.breadcrumb {
    background-color: transparent !important;
    display: flex;
}

    .breadcrumb i {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
    }

    .breadcrumb span {
        font-weight: 500;
        opacity: 0.6;
        cursor: pointer;
        color: #233763;
    }

        .breadcrumb span.cancel:hover {
            opacity: 1;
            color: #233763;
        }

        .breadcrumb span:hover {
            opacity: 1;
            font-weight: 600;
            color: #4e73df;
        }

        .breadcrumb span.active {
            opacity: 1;
            font-weight: 600;
            color: #4e73df;
            cursor: default;
        }

.pointer {
    cursor: pointer;
}

.fade-in-out {
    opacity: 0;
    animation: fade-in 0.3s ease-in forwards;
}

@keyframes fade-in {
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.delay {
    animation-delay: 0.3s
}

.table-responsive {
    max-height: 60vh;
    overflow: auto;
}

@media(max-width: 1600px) {
    .table-responsive {
        max-height: 55vh;
    }
}