html {
    font-size: max(9px, min(12px, 0.6vw))
}

.content {}

.divcontentcentered {
    text-align: center;
}

select.form-control:not([size]):not([multiple]) {
    height: auto !important;
}

.atomtags {
    margin-top: 2px;
    display: flex;
    font-size: 0.6rem;
    align-self: center;
}

.atomtags .linked_atoms {
    font-size: 1rem;
}

.atomtags.at_row {
    margin-top: 2px;
    display: flex;
    flex-direction: row;
    font-size: 0.6rem;
    align-self: center;
}

.atomtags.at_col {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    min-width: 70px;
    align-self: center;
    /* min-height: 100%; */
}

.form-content {
    padding-right: 20%;
    padding-left: 20%;
    margin-right: auto;
    margin-left: auto;
    background: white;
}


/* DivTable.com */

.divTable {
    display: table;
    width: 100%;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    background-color: #eee;
    display: table-header-group;
}

.divTableCell,
.divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}

() .divTableHeading {
    background-color: #eee;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot {
    background-color: #eee;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}


/* * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
} */

html {}

html,
body {
    height: 100%;
    margin: 0px;
}

.login {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}

.login h1 {
    text-align: center;
    color: #5b6574;
    /*	font-size: 24px;*/
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}

.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #3274d6;
    color: #ffffff;
}

.login form input[type="password"],
.login form input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}

.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #3274d6;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}

.login form input[type="submit"]:hover {
    background-color: #2868c7;
    transition: background-color 0.2s;
}

body.loggedin {
    background-color: #f3f4f7;
    width: 100%;
}


/**
.content {
	width: 95%;
	margin: 0 auto;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
} **/

.mermaid {
    /** Set this value to whatever is appropriate for your use case, or use the height property instead **/
    width: 100%;
    height: 500px;
    border: 1px solid black;
    display: inline-block;
    text-align: center;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }
    #sidebar ul li a {
        padding: 20px 10px;
    }
    #sidebar ul li a span {
        font-size: 0.85rem;
    }
    #sidebar ul li a i {
        margin-right: 0;
        display: block;
    }
    #sidebar ul ul a {
        padding: 10px !important;
    }
    #sidebar ul li a i {
        font-size: 1.3rem;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

.popup-overlay {
    /*Hides pop-up when there is no "active" class*/
    visibility: hidden;
    position: absolute;
    background: #ffffff;
    border: 3px solid #666666;
    width: 50%;
    height: 50%;
    left: 25%;
}

.popup-overlay.active {
    /*displays pop-up when "active" class is present*/
    visibility: visible;
    text-align: center;
}

.popup-content {
    /*Hides pop-up content when there is no "active" class */
    visibility: hidden;
}

.popup-content.active {
    /*Shows pop-up content when "active" class is present */
    visibility: visible;
}


/* .group {
    margin-top: 1em;
    padding: 2em;
    border: 1px solid black;
    background: #eee;
    font-family: sans-serif;
} */

.dragelement {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: -1px;
    border: 1px solid black;
    padding: 1em;
    background: white;
    font-size: 0.8rem;
}

.dragelements {
    min-height: 1em;
}


/* Style the tab */

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}


/* Change background color of buttons on hover */

.tab button:hover {
    background-color: #ddd;
}

.nohover:hover {
    color: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
}


/* Create an active/current tablink class */

.tab button.active {
    background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}


/* Table Styles */


/* 
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: $spacer;
    background-color: $table-bg; // Reset for nesting within parents with `background-color`.
    th,
    td {
        padding: $table-cell-padding;
        vertical-align: top;
        border-top: $table-border-width solid $table-border-color;
    }
    thead th {
        vertical-align: bottom;
        border-bottom: (2 * $table-border-width) solid $table-border-color;
    }
    tbody+tbody {
        border-top: (2 * $table-border-width) solid $table-border-color;
    }
    .table {
        background-color: $body-bg;
    }
}

.table-sm {
    th,
    td {
        padding: $table-cell-padding-sm;
    }
}

.table-bordered {
    border: $table-border-width solid $table-border-color;
    th,
    td {
        border: $table-border-width solid $table-border-color;
    }
    thead {
        th,
        td {
            border-bottom-width: (2 * $table-border-width);
        }
    }
}

.table-striped {
    tbody tr:nth-of-type(odd) {
        background-color: $table-accent-bg;
    }
}

.table-hover {
    tbody tr {
        @include hover {
            background-color: $table-hover-bg;
        }
    }
}

@each $color,
$value in $theme-colors {
    @include table-row-variant($color, theme-color-level($color, -9));
}

@include table-row-variant(active, $table-active-bg);
.table {
    .thead-dark {
        th {
            color: $table-dark-color;
            background-color: $table-dark-bg;
            border-color: $table-dark-border-color;
        }
    }
    .thead-light {
        th {
            color: $table-head-color;
            background-color: $table-head-bg;
            border-color: $table-border-color;
        }
    }
}

.table-dark {
    color: $table-dark-color;
    background-color: $table-dark-bg;
    th,
    td,
    thead th {
        border-color: $table-dark-border-color;
    }
    &.table-bordered {
        border: 0;
    }
    &.table-striped {
        tbody tr:nth-of-type(odd) {
            background-color: $table-dark-accent-bg;
        }
    }
    &.table-hover {
        tbody tr {
            @include hover {
                background-color: $table-dark-hover-bg;
            }
        }
    }
}

.table-responsive {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);
        &#{$infix} {
            @include media-breakpoint-down($breakpoint) {
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
                // Prevent double border on horizontal scroll due to use of `display: block;`
                >.table-bordered {
                    border: 0;
                }
            }
        }
    }
} */

.searchbox {
    /* width: 100%; */
    /* Full-width */
    font-size: 16px;
    /* Increase font-size */
    /* Add some padding */
    /* border: none; */
}

.searchicon {
    position: absolute;
    z-index: 2;
    left: 30px;
}

#filtersubmit {
    position: relative;
    /* z-index: 999; */
    left: 0px;
    color: black;
    cursor: pointer;
    width: 50px;
}

.spacediv {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: 0.2rem;
}


/* .verticaltext {
    transform: rotate(-90deg);
    transform-origin: right, top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right, top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right, top;
    position: absolute;
    color: black;
    padding-left: 0px;
    right: 0px;
    left: 0px;
} */

.bowtie_container {
    position: relative;
    /* overflow: hidden; */
    margin: 0 auto;
    /* border-top: solid 2px; */
}

.left,
.right,
.divider,
.escalatordiv,
.sectionsdiv {
    float: left;
    /* height: 100%; */
}

.left {
    width: 49.5%;
    display: block;
    z-index: 1;
    padding-right: 20px;
    /*  height: 100vh;*/
}

.escalatordiv,
.sectionsdiv {
    width: 95%;
    display: block;
    /*  height: 100vh;*/
}

.divider {
    background: grey;
    width: 1%;
    max-width: 5px;
    display: block;
    height: 100vh;
    justify-content: center;
    display: flex;
    z-index: 2;
}

.right {
    /* height: 100vh; */
    display: block;
    width: 49.5%;
    z-index: 1;
}

.showLeft {
    cursor: pointer;
}

.control {
    background-color: white;
}

.mitigation {
    background-color: white;
}

.threat_container {
    /*
background-color: transparent;

height: 80px;

border-top: black;
display: flex;
justify-content: left;
align-items: center;
border-radius: 30px;
float: left;
order: 2;
*/
    display: flex;
    order: 2;
    flex-grow: 0;
    /* align-items: center; */
    /* height: 80px; */
    /* margin-top: 0px !important; */
}

.threat_div {
    height: 74px;
    width: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 37px;
    background-color: lightblue;
}

.control_drop {
    display: flex;
    order: 0;
    /* flex-grow: 5; */
    margin-right: 20px;
    justify-content: right;
    overflow: visible;
    /* min-width: 100px; */
}

.inherited_controls {
    display: flex;
    order: 1;
    /* flex-grow: 5; */
    margin-right: 20px;
    justify-content: right;
    border-radius: 20px;
    background-color: gainsboro;
}

.mitigation_drop {
    display: flex;
    order: 0;
    /* flex-grow: 28; */
    justify-content: left;
    margin-left: 15px;
    overflow: visible;
    min-width: 100px;
}

.inherited_mitigations {
    display: flex;
    order: 1;
    /* flex-grow: 28; */
    justify-content: left;
    margin-left: 15px;
    border-radius: 20px;
    background-color: gainsboro;
}

.escalator_drop {
    display: flex;
    order: 1;
    /* flex-grow: 5; */
    margin-right: 20px;
}

.element_drop {
    display: flex;
    order: 1;
    flex-grow: 5;
    margin-right: 20px;
}

.control_add {}

.newcontrol {
    /*  align-self: flex-start;*/
}

.line_svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connector_line {
    stroke-width: 2px;
    stroke: rgb(0, 0, 0);
}

.risk_div {
    height: 74px;
    width: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 37px;
    background-color: lightblue;
}

.risk_container {
    background-color: transparent;
    /* height: 80px; */
    display: flex;
    border-top: black;
    justify-content: right;
    /* border-radius: 30px; */
    /* flex: 1; */
    order: 2;
    margin-top: 0px !important;
}

.float-container {
    /* padding: 20px; */
    /*    width: 100%;*/
    flex-direction: row;
    display: flex;
    -webkit-overflow-scrolling: touch;
    /* margin-bottom: 20px; */
    /* min-height: 150px; */
}

.float-container.overflow {
    overflow-y: hidden;
    /* overflow-x: scroll; */
}

.float-container.controls {
    flex-direction: row-reverse;
    margin-right: 20px;
    border: none;
    /* height: 150px; */
}

.float-container.mitigations {
    flex-direction: row;
    margin-left: 48px;
    border: none;
    /* height: 150px; */
}

.float-container.escalators {
    flex-direction: row;
    margin-left: 20px;
    border: none;
    /* height: 200px; */
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}

.ui-draggable-dragging {
    z-index: 99999;
}

.originbox {
    display: flex;
    background-color: white;
    border: black;
    min-height: 120px;
    border: solid;
    border-radius: 20px;
    align-items: center;
    overflow-x: scroll;
    padding-top: 5px;
    min-width: 90px;
    overflow-y: hidden;
}

.escalator_origin {
    flex: 1;
}

.threat_origin {
    flex: 1;
}

.control_origin {
    flex: 2;
}

.mitigation_origin {
    flex: 2;
}

.compliance_origin {
    flex: 2;
}

.risk_origin {
    flex: 1;
}

#origin img,
#drop img {
    margin-top: 3px;
    margin-left: 5px;
}

.drop {
    background-color: rgba(255, 255, 255, 0.5);
    /* height: 90px; */
    border-top: black;
    display: flex;
    /* border-radius: 30px; */
    /* min-width: 100px; */
    min-height: 106px;
}

.drop .atomtags {
    /*  display: none; */
}

.over {
    border: solid 5px slategray;
}

.draggable {
    /* border: solid 2px gray;*/
}

.cardicon {
    position: absolute;
    top: 0px;
    right: 10px;
}

.squarediv {
    background-color: white;
    /* min-width: 80px;
    max-width: 80px;
    min-height: 80px;
    max-height: 80px; */
    width: min(80px, 7rem);
    height: min(80px, 7rem);
    /* font-size: 8px; */
    font-size: min(8px, 0.7rem);
    float: left;
    /* margin-left: 9px;
    margin-right: 9px; */
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    border-radius: 1rem;
    border-width: 2px;
    text-align: center;
    display: flex;
    /* justify-content: center;*/
    /*  align-items: center;*/
    border: 3px solid;
    position: relative;
    /* padding-top: 4px; */
    flex-direction: column;
    align-items: center;
}

.squarediv.risk {
    border: 3px solid red;
}

.squarediv.standard_atom {
    border: 3px solid black;
}

.squarediv.threat {
    border: 3px solid blue;
}

.squarediv.control {
    border: 3px solid green;
}

.squarediv.question {
    border: 3px solid green;
}

.squarediv.survey {
    border: 3px solid orange;
}


.squarediv.small {
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    border-radius: 4px;
}

.bg-control {
    background-color: green;
}

.squarediv.mitigation {
    border: 3px solid orange;
}

.bg-mitigation {
    background-color: #ffa500;
}

.squarediv.escalator {
    border: 3px solid yellow;
}

.squarediv.report {
    border: 3px solid pink;
    border-top: 3px solid pink;
}

.squarediv.record {
    border: 3px solid;
    border-top: 3px solid;
}

.squarediv.audit {
    border: 3px solid pink;
    border-top: 3px solid pink;
}

.squarediv.compliance {
    border: 3px solid black;
}

.squarediv.report_t {
    border: 3px solid pink;
}

.squarediv.checklist_t {
    border: 3px solid pink;
}

.squarediv.audit_t {
    border: 3px solid pink;
}

.squarediv.action {
    border: 3px solid rgb(0, 238, 255);
    border-top: 3px solid rgb(0, 238, 255);
}

.squarediv.safety_case {
    border: 3px solid black;
}

.squarediv.document {
    border: 3px solid brown;
    border-top: 3px solid brown;
}

.squarediv.process {
    border: 3px solid brown;
    border-top: 3px solid brown;
}

.squarediv.procedure {
    border: 3px solid brown;
    border-top: 3px solid brown;
}

.squarediv.investigation {
    border: 3px solid rgb(0, 238, 255);
    border-top: 3px solid rgb(0, 238, 255);
}

.small.hazard {
    border: 3px solid black;
    background-color: white;
    background: linear-gradient(white, white), repeating-linear-gradient(-45deg, black, black 5px, red 5px, red 10px);
    padding: 5px 5px 5px 5px;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
}

.squarediv.hazard {
    border: none;
}

.squarediv.bowtie {
    border: 3px solid red;
    border-radius: 100%;
}

.textbox.bowtie {
    display: flex;
    align-items: center;
    justify-content: center;
}

.atom {
    /* background-color: transparent; */
    border: none;
    /* width: fit-content; */
}

.interbox {
    z-index: 2;
}

.threat_background {
    background-color: blue;
}

.risk_background {
    background-color: red;
}

.control_background {
    background-color: green;
}

.mitigation_background {
    background-color: orange;
}

.escalator_background {
    background-color: yellow;
}

.report_background {
    background-color: black;
}

.investigation_background {
    background-color: black;
}

.hazard_background {
    background-color: none;
}

.bowtie_background {
    background-color: red;
}

.threat_border {
    border: 3px solid blue;
}

.risk_border {
    border: 3px solid red;
}

.control_border {
    border: 3px solid green;
}

.mitigation_border {
    border: 3px solid orange;
}

.escalator_border {
    border: 3px solid yellow;
}

.report_border {
    border: 3px solid pink;
}

.investigation_border {
    border: 3px solid black;
}

.hazard_border {
    border: none;
}

.bowtie_border {
    border: 3px solid red;
}

.textbox.bowtie {
    display: flex;
    align-items: center;
    justify-content: center;
}

.atom {
    background-color: transparent;
    border: none;
}

.interbox {
    z-index: 2;
}

.squarediv.threat {
    border: 3px solid blue;
}

.squarediv .provider {
    background-color: lightskyblue;
    /*margin-top: 45px;*/
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 14px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .item {
    /*margin-top: 45px;*/
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 14px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .strategy {
    background-color: black;
    color: white;
    /* margin-top:57px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 14px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .otherbowtie {
    /* background-color: silver; */
    /* margin-top: 68px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 14px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .hazard {
    /* background-color: silver; */
    /* margin-top: 68px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    /* border-radius: 14px; */
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
    border: none;
}

.squarediv .responsible {
    background-color: silver;
    /* margin-top: 68px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 14px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .effectiveness {
    /* margin-top: 80px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 61px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
}

.squarediv .barriertype {
    /* margin-top: 80px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 61px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
    border: 1px solid black;
    background-color: white;
}

.squarediv .atomtags .risk {
    /* margin-top: 80px; */
    /* position: absolute; */
    /* margin-left: -5px; */
    border-radius: 61px;
    cursor: default;
    width: 80px;
    overflow: hidden;
    height: 12px;
    border: 1px solid black;
    background-color: white;
}

.squarediv.risk {
    border: 5px solid red;
}

.trash {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.hazard_div {
    border: black;
    border-color: black;
    width: 100px;
    height: 100px;
    /* position: absolute; */
    border-style: solid;
    /* margin-top: 100px; */
    background-color: white;
    border-radius: 50%;
    text-align: center;
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    font-weight: bold;
    z-index: 3;
}

.hazard_name_inner_div {
    border: black;
    border-color: black;
    border-style: solid;
    width: 50px;
    background-color: white;
    min-height: 50px;
}

.hazard_name_outer_div {
    /* position: absolute; */
    /* margin-bottom: 200px; */
    border: black;
    border-color: black;
    border-style: solid;
    background-color: white;
    width: 100px;
    height: 100px;
    background: linear-gradient(white, white), repeating-linear-gradient(-45deg, black, black 5px, red 5px, red 10px);
    padding: 5px 5px 5px 5px;
    border-radius: 10px;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
    z-index: 1;
    text-align: center;
    font-size: 8px;
}

.hazard_bg {
    background-color: white;
    background: linear-gradient(white, white), repeating-linear-gradient(-45deg, black, black 5px, yellow 5px, yellow 10px);
    padding: 5px 5px 20px 5px;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
}

.bowtie_name_div {
    background-color: white;
    /* height: 50%;*/
    display: flex;
    /* align-items: center; */
    /* border: 3px solid black; */
    width: 100%;
    /* align-content: center; */
    /* text-align: justify; */
    flex-flow: column;
}

.div-contents {}

.btline {
    /* border-top: solid; */
    margin-bottom: 20px;
}

.atom .boxinfo {
    margin-top: 0px;
    background-color: white;
    border-radius: 14px;
}

.boxinfo:hover {
    /* transform-origin: bottom right; */
    transform: scale(2) !important;
}

.boxdelete:hover {
    transform-origin: bottom right;
    transform: scale(2) !important;
    padding: 0px!important;
}

.addboxescalator:hover {
    transform-origin: bottom right;
    transform: scale(2) !important;
}


/* .existingboxescalator:hover {
    transform-origin: bottom right;
    transform: scale(2) !important;
} */

.addboxatoms:hover {
    transform-origin: bottom right;
    transform: scale(2) !important;
}

.existingboxatoms:hover {
    transform-origin: bottom right;
    transform: scale(2) !important;
}

.squarediv .textbox {
    position: relative !important;
    /* width: 100%; */
    min-height: 100%;
    max-height: 100%;
    overflow-y: clip;
    overflow-x: clip;
    border-radius: 12px;
    /* min-width: 75px;
    max-width: 75px; */
    width: min(75px, 6.5rem);
    height: min(75px, 6.5rem);
}

.hazard_name_outer_div .textbox {
    position: relative !important;
    width: 100%;
    min-height: 100%;
    max-height: 80%;
    overflow: auto;
    font-weight: bold;
    scrollbar-color: lightgray white;
    scrollbar-width: thin;
}

.atom .boxdelete {
    background-color: white;
    border-radius: 14px;
    cursor: default;
    color: red;
}

.atom .riskdelete {
    background-color: white;
    border-radius: 14px;
    cursor: default;
    color: red;
    align-self: flex-end;
    position: absolute;
    left: -5px;
    top: -5px;
}

.atom .threatdelete {
    background-color: white;
    border-radius: 14px;
    cursor: default;
    color: red;
    align-self: flex-end;
    position: absolute;
    left: -5px;
    top: -5px;
}

.atom .existingboxatoms {
    background-color: white;
    color: green;
    cursor: default;
}

.existingboxatoms.threat {
    border: red solid 2px;
}

.existingboxatoms.standard_atom {
    border: black solid 2px;
}

.atom .addboxatoms {
    color: black;
    border-radius: 14px;
    cursor: default;
}

.atom .existingboxescalator {
    background-color: white;
    color: green;
    border-radius: 14px;
    cursor: default;
}

.atom .addboxescalator {
    color: black;
    border-radius: 14px;
    cursor: default;
}

.originbox .boxadd {
    position: absolute;
    background-color: white;
    border-radius: 14px;
    cursor: default;
    color: green;
    align-self: flex-end;
    z-index: 10;
}

.originbox .mitigation_add {
    margin-right: 10px;
}

.workbench {
    position: relative;
    background: hsl(209deg 7% 92% / 10%);
    background-image: radial-gradient(hsl(209deg 3% 3% / 44%) 5%, transparent 0);
    background-size: 30px 30px;
}

.mitigationdelete {
    margin-top: -50px;
    position: absolute;
    margin-left: 0;
    background-color: white;
    border-radius: 14px;
    cursor: default;
    color: red;
}

.hidden {
    display: none !important;
}

.denydiv {
    display: flex;
    background-color: red;
    border: black;
    min-height: 120px;
    border: solid;
    border-radius: 20px;
    align-items: center;
    min-width: 80px;
    justify-content: center;
    display: none;
}

.alert {
    margin: 20px;
    border-radius: 20px;
}

.rightdiv {
    flex-direction: row-reverse;
}

.rightdivfirst {
    margin-left: auto;
}


/* .scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
    margin-left: 20px;
    margin-right: 20px;
}

.scrollbar::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 5px;
} */

.zoom_container {
    position: absolute;
    top: 4px;
    right: 9px;
}

.search-box {
    margin: 80px auto;
}

.caption {
    margin-bottom: 50px;
}

.loginForm input[type="text"],
.loginForm input[type="password"] {
    margin-bottom: 10px;
}

.loginForm input[type="submit"] {
    background: #fb044a;
    color: #fff;
    font-weight: 700;
}

#pswd_info {
    background: #dfdfdf none repeat scroll 0 0;
    color: #fff;
    left: 20px;
    top: 115px;
}

#pswd_info h4 {
    background: black none repeat scroll 0 0;
    display: block;
    font-size: 14px;
    letter-spacing: 0;
    padding: 17px 0;
    text-align: center;
    text-transform: uppercase;
}

#pswd_info ul {
    list-style: outside none none;
}

#pswd_info ul li {
    padding: 10px 45px;
}

.valid {
    background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px;
    color: green;
    line-height: 21px;
    padding-left: 22px;
}

.invalid {
    background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px;
    color: red;
    line-height: 21px;
    padding-left: 22px;
}

.mobilemenu {
    display: none;
}

.bigmenu {
    display: block;
}

@media (max-width: 992px) {
    .mobilemenu {
        display: block;
    }
    .bigmenu {
        display: none;
    }
}

.navbar-toggler {
    z-index: 10;
}

.navbar-nav {
    font-size: 1rem;
}

.navbar-nav .btn {
    font-size: 1rem;
}

.navbar-collapse.show {
    font-size: 3rem !important;
}

#bowtie_dropdown_menu.show {
    font-size: 0.3rem !important;
}

.insignificant {
    background-color: green;
}

.minor {
    background-color: greenyellow;
}

.moderate {
    background-color: yellow;
}

.major {
    background-color: orange;
}

.catastrophic {
    background-color: red;
}


/*
.overlaytextarea
{
  width: 300px;
}

.overlaydiv{
  position: absolute;
  display: flex;
  align-content: start;
}
*/

.exchangepill {
    position: relative;
    float: right;
    margin-left: 100%;
    background-color: white;
    border-radius: 15px;
    width: 30px;
    z-index: 99;
}

.listpill {
    position: relative;
    float: right;
    margin-left: 100%;
    background-color: white;
    border-radius: 15px;
    width: 30px;
    z-index: 99;
}

.VP {
    background-color: red;
}

.P {
    background-color: yellow;
}

.G {
    background-color: lightgreen;
}

.VG {
    background-color: green;
}

.autocomplete-container ul {
    background: none repeat scroll 0 0 #ffffff;
    border-top: 1px dotted #ccc;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    position: relative;
    top: -1px;
    list-style-type: none;
}

.autocomplete-container {
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.autocomplete-container ul li div {
    display: block;
    font-weight: normal;
    word-break: break-all;
}

.atag:hover {
    background-color: gray;
}

.competencecard {}

.smallsearchbox {
    width: 100%;
    /* font-size: .8em; */
    /* padding: 12px 20px 12px 40px; */
    /* border: none; */
}

.nojava {
    pointer-events: none;
}

.linked_atom_container {
    /* background-color: lightyellow; */
    flex-direction: column;
    justify-content: left;
    /* border-radius: 50px; */
    /* border: solid yellow 5px; */
    display: none;
    z-index: 1000;
    position: relative;
}

.linked_atom_container.overflow {
    overflow-y: hidden;
    overflow-x: scroll;
}

.left .linked_atom_container {
    /* margin-right: 70px; */
    z-index: 0;
}

.right .linked_atom_container {
    /* margin-left: 70px; */
    z-index: 0;
}

.left .linked_atom_container .float-container {
    padding: 0px;
    flex-direction: row-reverse;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    transform-origin: center left;
    align-items: center;
}


/* .left .linked_atom_container .float-container:hover {
    transform: scale(1.5);
} */

.right .linked_atom_container .float-container {
    padding: 0px;
    /* padding-right: 30px; */
    flex-direction: row;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    transform-origin: center right;
    align-items: center;
}

.right .linked_atom_container .float-container:hover {
    transform: scale(1.5);
}

.right .linked_atom_container .escalator_drop {
    flex-direction: row-reverse;
}

.linked_atom_container .escalator_container {
    order: 9999;
}

.left .escalator_drop {
    /* align-items: center;*/
    /*  height: 4px;
  background-image: linear-gradient(to right, black , lightyellow);*/
    border-radius: 15px;
}

.right .escalator_drop {
    /*  align-items: center;
  height: 4px;
  background-image: linear-gradient(to left, black , lightyellow);*/
    border-radius: 15px;
}

.left .edit_escalator_button {
    position: absolute;
    /* border: solid black 3px; */
    right: 6px;
    /* top: -33px; */
    z-index: 10;
    /* background-color: yellow; */
    display: flex;
    /* margin-top: auto; */
    /* margin-bottom: auto; */
    align-items: center;
    justify-content: center;
    margin-top: -7px;
}

.right .edit_escalator_button {
    position: absolute;
    /* border: solid black 3px; */
    left: 6px;
    /* top: -33px; */
    z-index: 10;
    /* background-color: yellow; */
    display: flex;
    /* margin-top: auto; */
    /* margin-bottom: auto; */
    align-items: center;
    justify-content: center;
    margin-top: -7px;
}

@media print {
    @page {
        size: A4 portrait;
    }
    /* use width if in portrait (use the smaller size to try 
     and prevent image from overflowing page... */
    .atomorigin {
        display: none !important;
    }
    .interbox {
        display: none !important;
    }
    .searchbox {
        display: none !important;
    }
    .zoom_container {
        display: none !important;
    }
    .no-print,
    .noprint * {
        display: none !important;
    }
    .pagebreak {
        page-break-before: always;
    }
    .vsmallprint {
        font-size: 0.5rem;
    }
    .smallprint {
        font-size: 0.8rem;
    }
    .fixed-table-toolbar {
        display: none !important;
    }
    .sv_main .sv_container {
        font-size: 1vw;
    }
}

@media screen {
    .print-only,
    .printonly * {
        display: none !important;
    }
    .ds_subtle {
        filter: drop-shadow(3px 3px 3px black);
    }
    .rounded_ds_card {
        filter: drop-shadow(10px 10px 4px grey);
        border-radius: 30px !important;
    }
}

.colourbox {
    height: 20px;
    border-radius: 10px;
}

.riskbubble {
    width: 75px;
    height: 75px;
    /* margin: auto; */
    background: purple;
    border-radius: 38px;
    color: white;
    display: flex;
    /* zoom: 2; */
    position: absolute;
    margin-top: -25px;
    margin-left: 32px;
    align-items: center;
    justify-content: center;
}

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

.tab-pane {
    /*
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0px 0px 5px 5px;
  padding: 10px;
  */
}


/* .nav-tabs {
    margin-bottom: -1px;
    border: black;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    border-left: solid;
    border-right: solid;
    border-top: solid;
} */


/* .dragbox:before {
    content: "\f150";
    font-family: "Font Awesome 5 Free";
    font-size: x-large;
    color: lightgrey;
    position: absolute;
    margin-left: 50%;
} */

.admin_header {
    /* position: sticky;
    top: 0px;
    z-index: 5; */
    /* background-color: #343a40;
    color: lightgray; */
    /* margin-left: -15px!important;
    margin-right: -15px!important; */
}

.striped-table .row:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.bi::after {
    padding-right: 5px;
}


/* .container-fluid {
    padding-right: 0px!important;
    padding-left: 0px!important;
} */

.atomtag {
    border-radius: 10px;
}

.loaderdiv {
    margin: auto;
    width: 120px;
    padding-top: 10%;
}

.loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.tiny_loader {
    border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-top-style: solid;
    border-top-width: 2px;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: none;
    float: right;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#overlay {
    position: fixed;
    /* Sit on top of the page content */
    /*  display: none; /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    z-index: 10000;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}

.hidden_ghost {
    /* opacity: 0; */
}

.sv-custom-ranking-item__content {
    background-color: white;
    padding: 5px 10px 5px 35px;
    border-radius: 100px;
    display: flex;
}

.sv_ranking {
    touch-action: manipulation;
}

.sv-ranking-item__text {
    display: flex !important;
    align-items: center;
}

.sv-custom-textarea-item__content {
    border: none;
    padding: 0.5em;
    font-size: 2rem;
}

.sv_q_file_preview img {
    width: 20%;
}

.sd-row__question
{
    white-space: normal;
}
.sv_main .checklist-drag-drop-area input[type="button"],
.sv_main button {
    display: inline-block;
    font-weight: 400 !important;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    /* vertical-align: middle; */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 17px !important;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sv_main .sv_container .sv_header h5 {
    font-size: 1.2em;
    font-weight: 300;
    margin: 0;
}

.sp-preview {
    width: 90%;
}

.sp-dd {
    width: 8%;
    text-align: center;
}

.qrPreviewVideo {
    width: 100%;
    max-width: 500px;
}

.flex_break {
    flex-basis: 100%;
    height: 0;
}

.clipboard_toggle {
    /* position: absolute;
    bottom: 20px;
    right: 20px; */
}

.fixed-bottom {
    left: unset !important;
}

.form-range::-webkit-slider-thumb {
    background: #04aa6d;
    /* Green background */
}

.form-range:-moz-range-thumb {
    background: #04aa6d;
    /* Green background */
}

.form-range.priority_0::-webkit-slider-thumb {
    background: #04aa6d;
    /* Green background */
}

.form-range.priority_0::-moz-range-thumb {
    background: #04aa6d;
    /* Green background */
}

.form-range.priority_1::-webkit-slider-thumb {
    background: yellow;
    /* Green background */
}

.form-range.priority_1::-moz-range-thumb {
    background: yellow;
    /* Green background */
}

.form-range.priority_2::-webkit-slider-thumb {
    background: red;
    /* Green background */
}

.form-range.priority_2::-moz-range-thumb {
    background: red;
    /* Green background */
}

.priority_0 {
    background: #04aa6d;
    /* Green background */
}

.priority_0::after {
    content: "L";
    /* Green background */
}

.priority_1 {
    background: yellow;
    /* Green background */
}

.priority_1::after {
    content: "M";
    /* Green background */
}

.priority_2 {
    background: red;
    /* Green background */
}

.priority_2::after {
    content: "H";
    /* Green background */
}

.translate-left {
    transform: translate(-80%, -50%) !important;
}


/* .overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
} */

.css_preview {
    width: 50%;
    height: 50%;
    min-height: 20px;
    min-width: 20px;
}

.email_cb {
    background-color: red !important;
    border-color: red !important;
}

.v-nav-link[aria-selected="false"] {
    border-left: solid #dee2e6 !important;
    border-top: solid #dee2e6 !important;
    border-bottom: solid #dee2e6 !important;
    border-right: solid #dee2e6 4px !important;
    margin-right: -16px;
    z-index: 100;
    background-color: white !important;
}

.v-nav-link:focus {
    border-left: solid black !important;
    border-top: solid black !important;
    border-bottom: solid black !important;
    background-color: #0d6efd !important;
}

.v-nav-link[aria-selected="true"] {
    margin-right: -16px;
    z-index: 100;
    border-left: solid black !important;
    border-top: solid black !important;
    border-bottom: solid black !important;
    background-color: #0d6efd !important;
}


/* @media (min-width: 992px) { */

#atom_top_card {
    /* position: sticky;
    top: 0px; */
    /* ➜ the trick */
    /* ➜ compensate for the trick */
    z-index: 50;
    /* filter: drop-shadow(10px 10px 4px grey); */
}


/* } */


/* .ds_subtle {
    filter: drop-shadow(3px 3px 3px black);
} */

.item_card {
    filter: drop-shadow(10px 10px 4px grey);
    /* border-radius: 30px !important; */
    min-height: 88px;
}

.ds_card {
    filter: drop-shadow(10px 10px 4px grey);
}

.item_card_hover {
    /* filter: drop-shadow(10px 10px 4px red) !important; */
}

.b-example-divider {
    flex-shrink: 0;
    width: 0.5rem;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid rgba(0, 0, 0, 0.15);
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

sidebar_container {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #0d6efd;
}


/* .card-view-title {
    font-weight: bold;
    display: inline-block;
    min-width: 30%;
    width: auto !important;
    text-align: left !important;
}
*/

.card-view {
    margin-bottom: 0.5rem !important;
}

#navbarNav {
    overflow: hidden;
}

.zi-10 {
    z-index: 10;
}

.zi-5 {
    z-index: 5;
}

.zi-2 {
    z-index: 2;
}

.zi-10 {
    z-index: 10;
}

.isSticky {
    position: sticky;
    top: 36px;
    z-index: 12;
}

.stickyOrigins {
    position: sticky;
    top: 0px;
    z-index: 500;
}

.hoverzoom {
    transform: scale(1.2);
}

.hovershade {
    background-color: darkgray;
    border-radius: 1em;
}

.halfsize {
    transform: scale(0.5);
}


/* .custom_accordion.collapsed::after {
    display: block;
    content: '˅';
}

.custom_accordion::after {
    display: block;
    content: '˄';
} */

.trans_hidden {
    visibility: hidden;
    height: 0px;
    opacity: 0;
    transition: visibility 0s, opacity 500ms, height 500ms;
}

.trans_shown {
    visibility: visible;
    height: auto;
    opacity: 100;
    transition: visibility 0s, opacity 500ms, height 500ms;
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    height: 100% !important;
    overflow-y: visible !important;
}

.border-dashed {
    border-style: dashed !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: transparent !important;
    outline: 0;
    box-shadow: 0 0 0 0 transparent !important;
}

.mh-100 {
    padding-top: 100px;
    transition: padding-top 500ms, visibility 500ms, opacity 500ms, height 500ms;
}

.mh-50 {
    padding-top: 50px;
    transition: padding-top 500ms, visibility 500ms, opacity 500ms, height 500ms;
}

.mh-25 {
    padding-top: 25px;
    transition: padding-top 500ms, visibility 500ms, opacity 500ms, height 500ms;
}

.mh-0 {
    padding-top: 0px;
    transition: padding-top 500ms, visibility 500ms, opacity 500ms, height 500ms;
}

.atom_item_card_header {
    font-size: 1.5rem;
    margin-top: 0;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 50rem !important;
    background-image: var(--bs-gradient) !important;
    --bs-bg-opacity: 1;
    /* background-color: rgba( var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; */
    background-color: #a1a1a1;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.rounded-4 {
    border-radius: 2.3rem !important;
}


/* Compliance Stuff */

.compliance_items {
    background-color: rgba(255, 255, 255, 0.5);
    height: 90px;
    border-top: black;
    display: flex;
    border-radius: 30px;
    min-width: 100px;
    display: flex;
    order: 1;
    margin-right: 20px;
}

.float-container.standard_line {
    /* height: 120px; */
}

.styled-scrollbars {
    /* Foreground, Background */
    scrollbar-color: rgb(126, 126, 126) #f2f3f600;
    /* overflow-x: auto; */
}

.styled-scrollbars::-webkit-scrollbar {
    width: 5px;
    /* Mostly for vertical scrollbars */
    height: 5px;
    /* Mostly for horizontal scrollbars */
}

.styled-scrollbars::-webkit-scrollbar-thumb {
    /* Foreground */
    background: rgb(126, 126, 126);
}

.styled-scrollbars::-webkit-scrollbar-track {
    /* Background */
    background: transparent;
}


/* .linked_atom_container {
    width: fit-content;
    margin-left: 100px;
} */

.section_container {
    background-color: #079e673d;
    border-radius: 20px;
    width: fit-content;
    height: fit-content;
}

.standard_atom {
    max-width: 200px;
}

.side-link {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(0, 0, 0, 0.03);
    padding-inline-end: 1vw;
    margin-top: 1vw;
    padding-inline-start: 0.5vw;
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;
    overflow: visible;
}

.side-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.side-link.active {
    background-color: rgba(0, 0, 0, 0.1);
}

.offcanvasRight {
    overflow: scroll;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    position: sticky;
    top: 0px;
    z-index: 9999;
    background-color: #a1a1a1;
}

.dimmed {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}


/* .dimmed:after {
    content: " ";
    z-index: 10;
    display: block;
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
} */

.swal-z {
    z-index: 9999;
}

.risk-table td {
    border: solid white 5px !important;
    border-collapse: unset;
    background-clip: padding-box;
}

.risk-table tr {
    border: solid white 5px !important;
    border-collapse: unset;
    background-clip: padding-box;
}

.wb-accordion-header {
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
}

.wb-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
}

.atom_type_selects:checked+label:after {
    content: "\00a0\00a0\2713";
}

.item_type_badge:checked+label:after {
    content: "\00a0\00a0\2713";
}

.inner-risk {
    font-size: max(11px, 0.5vw);
    /* min-height: max(1.5vw, 26px);
    min-width: max(1.5vw, 26px); */
    height: max(1.5vw, 26px);
    width: max(1.5vw, 26px);
    background-color: rgba(255, 255, 255, 0.4);
    ;
}

.risk-matrix-container {
    min-height: 60px;
    min-width: 60px;
    align-items: flex-start;
}

.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: black;
    border-color: #51585e;
}

.lds-facebook {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
    background-color: green;
}

.lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
    background-color: yellow;
}

.lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
    background-color: red;
}

@keyframes lds-facebook {
    0% {
        top: 8px;
        height: 64px;
    }
    50%,
    100% {
        top: 24px;
        height: 32px;
    }
}

.pulsing {
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.header_img {
    height: max(40px, min(8vw, 70px));
}

.header-menu-btn {
    margin-top: 0.1vh;
}

.navbar-brand {
    padding-top: 0px;
}

.textbox.bt_specific {
    background-color: powderblue;
}

.bowtie_items {
    background-color: lightblue;
}

.top-header {
    z-index: 1046 !important;
}

.btn-left {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E") center/3em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
}

a:focus,
a:active {
    outline: none !important;
}

.atom_square {}

.atomdrop {
    min-height: 85px;
    min-width: 85px;
}

.drop_holder {
    border: darkgray dashed 4px !important;
    border-radius: 5px;
}

.drop_ghost {
    border: lightgray dashed 3px;
    border-radius: 20px;
}

.accordion-button-na {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

.float-container .sort_container {
    height: 80px;
}

.rwb {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    height: 20px;
    display: inline-block;
    width: 20px;
}

.rwb-info-circle::before {
    content: url("data:image/svg+xml,%3Csvg width='4.2375mm' height='4.2241mm' version='1.1' viewBox='0 0 4.2375 4.2241' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-101.87 -194.36)'%3E%3Cg transform='matrix(.26458 0 0 .26458 95.317 197.76)' style='fill:currentColor'%3E%3Cpath d='m8 16a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0.93-9.412-1 4.705c-0.07 0.34 0.029 0.533 0.304 0.533 0.194 0 0.487-0.07 0.686-0.246l-0.088 0.416c-0.287 0.346-0.92 0.598-1.465 0.598-0.703 0-1.002-0.422-0.808-1.319l0.738-3.468c0.064-0.293 6e-3 -0.399-0.287-0.47l-0.451-0.081 0.082-0.381 2.29-0.287zm-0.93-1.088a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/g%3E%3Cg transform='matrix(.26458 0 0 .26458 101.87 194.35)' style='fill:currentColor'%3E%3Cellipse cx='7.9914' cy='8' rx='7.3048' ry='7.2796' style='fill:%23ffffff;stroke-width:1.406;stroke:%230000ff'/%3E%3Cpath d='m9.18 6.541-2.29 0.287-0.082 0.38 0.45 0.083c0.294 0.07 0.352 0.176 0.288 0.469l-0.738 3.468c-0.194 0.897 0.105 1.319 0.808 1.319 0.545 0 1.178-0.252 1.465-0.598l0.088-0.416c-0.2 0.176-0.492 0.246-0.686 0.246-0.275 0-0.375-0.193-0.304-0.533zm0.07-2.088a1 1 0 1 1-2 0 1 1 0 0 1 2 0z' style='fill:%230000ff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.rwb-dash-circle::before {
    content: url("data:image/svg+xml,%3Csvg width='4.2375mm' height='4.2241mm' version='1.1' viewBox='0 0 4.2375 4.2241' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-101.87 -194.36)'%3E%3Cg transform='matrix(.26458 0 0 .26458 95.317 197.76)' style='fill:currentColor'%3E%3Cpath d='m8 16a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0.93-9.412-1 4.705c-0.07 0.34 0.029 0.533 0.304 0.533 0.194 0 0.487-0.07 0.686-0.246l-0.088 0.416c-0.287 0.346-0.92 0.598-1.465 0.598-0.703 0-1.002-0.422-0.808-1.319l0.738-3.468c0.064-0.293 6e-3 -0.399-0.287-0.47l-0.451-0.081 0.082-0.381 2.29-0.287zm-0.93-1.088a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/g%3E%3Cg transform='matrix(.26458 0 0 .26458 101.87 194.35)' style='fill:currentColor'%3E%3Cellipse cx='7.9914' cy='8' rx='7.3048' ry='7.2796' style='fill:%23ffffff;stroke-width:1.406;stroke:%23ff0000'/%3E%3Cpath d='m-20.605-13.864a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0 1a8 8 0 1 0 0-16 8 8 0 0 0 0 16z' style='fill:%23000000'/%3E%3Cpath d='m3.9914 8a0.5 0.5 0 0 1 0.5-0.5h7a0.5 0.5 0 0 1 0 1h-7a0.5 0.5 0 0 1-0.5-0.5z' style='fill:%23ff0000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.no-collapse::after {
    content: none;
}

.sort-class {
    border: 1px solid black;
    border-radius: 0.5em;
    background-color: lightgrey;
}

.dropdown-toggle::after {
    margin-left: auto !important;
}

.calendar_default_event_inner {
    font-size: 10px!important;
}

.mh-50 {
    max-height: 50px;
    overflow: scroll;
}

.mh-100 {
    max-height: 100px;
    overflow: scroll;
}

.mh-150 {
    max-height: 150px;
    overflow: scroll;
}

.mh-200 {
    max-height: 200px;
    overflow: scroll;
}

.mh-250 {
    max-height: 250px;
    overflow: scroll;
}

.mh-300 {
    max-height: 300px;
    overflow: scroll;
}


/* NEW BLOCK: SWIMLANES
- The elements have BEM classes because it's a new design pattern.
- The h6 and A tags intentionally do not have a BEM name becuase we want them to inherit our application's default styles and they have no special styles of their own. */


/* mobile first layout: Swimlanes are vertically stacked to begin with. */

.swimlanes {
    /* The swimlanes__column element groups the heading and the list */
}

.swimlanes__column {
    /* min-width: 20rem; */
<?= $GLOBALS['ml']->tr('    min-width: max(500px, 20rem);
'); ?>    /* this is what makes the concept legible when there are many swimlanes */
    flex: 1;
    /* to keep everything equally sized */
    background: white;
    /* replace with casper color variable */
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin: 0.5rem;
}

.swimlanes__wide {
    min-width: 80%;
    max-width: 80%;
}


/*  nuke the ULs inherited margin and padding  */

.swimlanes__list {
    padding: 0;
    margin: 0;
}


/*  overwrite the LIs inherited list-style-type, margin and padding and add background and border-radius */

.swimlanes__listItem {
    list-style-type: none;
    margin: 0.5rem 0;
    padding: 1rem;
    background: lightgray;
    border-radius: 0.25rem;
}


/* From 48rem and up we switch the flex-direction to row for horizontally stacked swimlanes */

@media (min-width: 48rem) {
    .swimlanes {
        flex-direction: row;
        overflow-x: scroll;
    }
}

.w-100px {
    min-width: 100px;
}

.bowtie_controls,
.bowtie_mitigations {
    min-height: 100vh;
    width: 100%;
}

select {
    /* Reset Select */
    appearance: none;
    outline: 0;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    font-size: 1.75rem;
    padding: 0 1em;
    background-color: white;
    background-image: none;
    cursor: pointer;
    text-align: center;
}


/* Remove IE arrow */

select::-ms-expand {
    display: none;
}


/* Custom Select wrapper */

.select {
    position: relative;
    display: flex;
    border-radius: .25em;
    overflow: hidden;
}


/* Arrow */

.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
    background-color: #34495e;
    transition: .25s all ease;
    pointer-events: none;
}


/* Transition */

.select:hover::after {
    color: #f39c12;
}

.bg-dark-subtle {
    background-color: var(--bs-dark-bg-subtle) !important;
}

.aed-chart-container {
    position: relative;
    margin: auto;
    height: 20vh;
    width: 100%;
}