/* Typography
------------------------------------- */
/* Benzin Font Family*/
@font-face {
    font-family: "Benzin";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(assets/font/Benzin_Extra_Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Benzin";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/font/Benzin_Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Benzin";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/font/Benzin_Semibold.ttf) format("truetype");
}

@font-face {
    font-family: "Benzin";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/font/Benzin_Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Benzin";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/font/Benzin_Regular.ttf) format("truetype");
}

/* Jeko Font Family */
@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Thin.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Extra-Light.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Light.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Semi-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Extra-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Jeko";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(assets/font/FontsFree-Net-Jeko-Black.ttf) format("truetype");
}

/* Main Styling
------------------------------------- */

:root {
    --color-orange: #ba5a4d;
    --color-purple: #7800ff;
    --color-blue: #205ba8;
    --color-aqua: #3acbf0;
    --color-green: #008f00;
    --color-red: #ff0000;
    --color-beige: #FFE3B1;
    --color-hyperlink: #00AFF4;
    --color-uipath: #fb7225;

    --background-color: #1c1c1f;
    --background-color-dec: 255, 255, 255;
    --foreground-color: #141414;

    --text-color: #FFF;
    --color-navlink: #205ba8;
    --color-navlink: #205ba8;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background-color: #555;
    --background-color-dec: 0, 0, 0;

    --foreground-color: #222;

    --text-color: #fff;
    --color-blue: #00f6ff;
    --color-green: #00ff00;
    --color-navlink: #fff;
  }
} */

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--color-uipath) var(--background-color);
    text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
    height: 16px;
    width: 8px;
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--color-uipath);
    -webkit-border-radius: 1ex;
    border-radius: 1ex;
}

::-webkit-scrollbar-corner {
    background: rgb(0, 0, 0);
}

:target::before {
    content: "";
    display: block;
    height: 70px; /* fixed header height*/
    margin-top: -70px; /* negative fixed header height */
}

/* Main Content Areas
------------------------------------- */

body {
    background-image: url('https://i.imgur.com/EiGtsQU');
    background-color: var(--background-color);
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "Jeko", sans-serif;
}

.toggle {
    display: none;
}

.toggle-main {
    display: none;
}

.password-toggle {
    display: none;
}

header {
    position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    justify-content: center;
    align-content: center;
    height: 80px;
    margin-top: 10px;
    background-color: rgb(255, 76, 26, 0.0);
}


.header-div {
    padding-bottom: 50px;
}

.auth-wrapper {
    min-height: 100vh; /* minimum height = screen height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrong-password-text { /* minimum height = screen height */
    position: relative;
    display: none;
    font-weight: normal;
    text-align: center;
    align-content: center;
    font-size: 13px;
    color: #e85a23;
}

.auth-box {
    position:relative;
    background-color: rgb(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 25px;
    border: 5px solid #ec5c13;
    width: 30%;
    height: 345px;
}

.auth-box-title {
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    vertical-align: top; /* here */
    margin-bottom: 100px;

}

.auth-title {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.auth-description {
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    font-size: 14px;
    background-color: rgb(236, 92, 19, 0.4);
    border-radius: 10px;
    margin-left: 50px;
    margin-right: 50px;
    padding-top: 5px;
}

.toolbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    padding: 4px 6px;
    position: relative;
    margin-right: 15px;
    margin-left: 15px;
    z-index: 0;
    height: 70px;
}


.categoryButtons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    margin: 0;
    padding: 16px 80px;
    padding-top: 40px;
    position: relative;
    z-index: 0;
    height: 56px;
}

#logo-container {
    display: flex;
    height: 56px;
    margin: 0;
    column-gap: 12px;
    align-items: center;
}

#logo-icon {
    filter: brightness(100);
    height: 84px;
    width: auto;
}

#robotop-logo-icon {
    height: 45px;
    position: center;
    width: auto;
}

#title {
    width: 100px;
    font-family: "Benzin", sans-serif;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    padding-right: 210px;
}

/* Search Bar */

#search-bar {
    background-color: #222;
    border-radius: 24px;
    padding: 0 24px;
    height: 48px;
    display: flex;
    margin-bottom: 0;
    width: 50%
}

#search-button {
    filter: invert(100);
    align-self: center;
    margin-top: 0;
    margin-right: auto;
    padding-right: 6px;
    height: 20px;
    width: 20px;
}

#search-button > svg {
    width: 20px;
    height: 20px;
}

#search-slot {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    padding: 0;
    margin: 0;
    font-family: "Jeko", sans-serif;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}

#search-input {
    align-self: center;
    flex: 1 1 auto;
    line-height: 20px;
    padding: 8px 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    max-height: 32px;
    background-color: transparent;
    border-style: none;
    outline: none;
    border-radius: 0;
    caret-color: auto;
    color: #fff;
}

#settings-pane > svg {
    width: 24px;
    height: 24px;
    align-self: center;
    filter: invert(100);
}

/* sidenav */

#navbutton {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background-color: #ff6a12;
    z-index: 10;
}

#navbutton > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    align-self: center;
    filter: invert(100);
}

#sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(12, 11, 11, 0.6);
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 80px;
}

#sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.2s;
}

#sidenav a:hover {
    color: #f1f1f1;
}

.main {
    padding: 100px 10px 0 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: var(--foreground-color);
    border: solid;
    border-radius: 5px;
    border-color: #FFF;
    align-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 15px;
    border-color: white;
    padding: 10px;
}

.grid-container > div {
    background-color: rgb(12, 11, 11, 0.7);
    border-radius: 20px;
    text-align: center;
    padding: 30px;
    font-size: 30px;
}

.resource-grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 15px;
    border-color: white;
    padding: 10px;
    margin-bottom: 100px;
}

.resource-grid-container > div {
    background-color: rgb(12, 11, 11, 0.7);
    border-radius: 20px;
    text-align: center;
    padding: 30px;
    font-size: 30px;
}

.product-name {
    color: #FFF;
    font-size: 35px;
    margin-bottom: 10px;
    display: block;
}

.course-name {
    color: #FFF;
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
}

.country-manufactured {
    color: #6BB2D5;
    display: inline-block;
}

.shipping-method {
    color: #FF962A;
    display: inline-block;
}

.price-amount {
    color: #6BD583;
    display: inline-block;
}

.attribute {
    color: white;
    font-size: 20px;
    display: inline-block;
}

.purchaseButton {
    padding: 10px;
    width: 50%;
    background-color: rgb(255, 105, 20, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.purchaseButton:hover {
    background-color: rgb(85, 203, 94, 0.5);
    width: 60%;
}

.resource-download {
    padding: 10px;
    width: 70%;
    background-color: rgb(54, 131, 208, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.resource-download:hover {
    background-color: rgb(85, 203, 94, 0.5);
    width: 80%;
}

.resource-download-outline {
    padding: 10px;
    width: 80%;
    background-color: rgb(255, 135, 9, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.resource-download-outline:hover {
    background-color: rgb(85, 203, 94, 0.5);
    width: 90%;
}

.resource-download-resources {
    padding: 10px;
    width: 90%;
    background-color: rgb(59, 187, 71, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.resource-download-resources:hover {
    background-color: rgb(85, 203, 94, 0.5);
    width: 100%;
}

.citizen-course {
    padding: 10px;
    width: 75%;
    background-color: rgb(244, 179, 0, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.citizen-course:hover {
    background-color: rgb(244, 179, 0, 0.9);
    width: 80%;
}

.associate-course {
    padding: 10px;
    width: 80%;
    background-color: rgb(255, 111, 23, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.associate-course:hover {
    background-color: rgb(255, 111, 23, 0.9);
    width: 85%;
}

.master-course {
    padding: 10px;
    width: 70%;
    background-color: rgb(255, 73, 26, 0.7);
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.master-course:hover {
    background-color: rgb(255, 73, 26, 0.9);
    width: 75%;
}

.resource-description {
    background-color: rgb(40, 120, 201, 0.3);
    margin-top: 15px;
    border-radius: 15px;
    padding: 10px;
    font-style: italic;
}

.resource-description-outline {
    background-color: rgb(255, 135, 9, 0.3);
    margin-top: 15px;
    border-radius: 15px;
    padding: 10px;
    font-style: italic;
}

.resource-description-resources {
    background-color: rgb(59, 187, 71, 0.3);
    margin-top: 15px;
    border-radius: 15px;
    padding: 10px;
    font-style: italic;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.google-form-card {
    margin: 10px;
    padding-left: 20px;
    background-color: #10388E;
    border: solid;
    border-radius: 5px;
    border-color: #FFF;
    align-content: center;
}

.product-card-light {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #ff8709;
    align-content: center;
}
.product-card-middle {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #FF6F17;
    align-content: center;
}
.product-card-dark {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #ff491a;
    align-content: center;
}
.resource-card {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #317fcd;
    align-content: center;
}

.resource-card-outline {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #ff8709;
    align-content: center;
}

.resource-card-resources {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #3BBB47;
    align-content: center;
}

.citizen-course-card {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #6D6D6D;
    align-content: center;
}

.course-card {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #6D6D6D;
    align-content: center;
}

.master-course-card {
    margin: 10px;
    background-color: #0c0b0b;
    border: solid;
    border-radius: 5px;
    border-color: #6D6D6D;
    align-content: center;
}

.footer-robotops{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:40px;
    text-align: center;
    padding-bottom: 10px;
}

.page-header-banner {
    margin-top: -50px;
    border-image-slice: 1;
    border-radius: 5px;
    border-image-source: linear-gradient(to right, #ff4d1a, #ff860a);
    align-content: center;
}

.page-header-banner2 {
    margin-top: -85px;
    border-image-slice: 1;
    border-radius: 5px;
    border-image-source: linear-gradient(to right, #ff4d1a, #ff860a);
    align-content: center;
}

.intro-page-banner {
    margin: 0 auto;
    background-color: #10388E;
    border: solid;
    border: 5px solid;
    border-image-slice: 1;
    border-radius: 5px;
    border-image-source: linear-gradient(to right, #ff4d1a, #ff860a);
    align-content: center;
}

.loader {
    position: relative;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 40%, white);
    animation: move 0.5s linear infinite;
}

.loader::before {
    position: absolute;
    content: "";
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background: #000;
    border-radius: 50%;
    z-index: 2;
}

.loader::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 40%, red);
    filter: blur(20px);
}

@keyframes move {
    to {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

.pathway-length {
    margin-top: 20px;
    padding: 10px;
    background-color: #FF6F30;
    border-radius: 20px;
    color: #FFF;
    font-family: 'Montserrat SemiBold';
}

.if-card {
    padding: 10px 20px;
    background-color: var(--foreground-color);
    border: solid;
    border-radius: 5px;
    border-color: #FFF;
}

.categoryCard {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: var(--foreground-color);
    border: solid;
    border-radius: 5px;
    border-color: #FFF;
}

.categoryCard:hover {
    background-color: #343434;
}

.audio-player {
    margin-bottom: 5px;
}

.path-list {
    padding: 10px;
    list-style: none
}

.close{
    float:right;
    font-size:21px;
    font-weight:700;
    line-height:1;
    color:#fff;
    background-color: white;
    text-shadow:0 1px 0 #fff;
    filter:alpha(opacity=100);
    opacity:1
}
.close:focus,.close:hover{
    color:#f66531;
    text-decoration:none;
    cursor:pointer;
    filter:alpha(opacity=100);
}
button.close{
    padding:0;
    cursor:pointer;
    background:0 0;
    border:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}
.modal.open{
    overflow:hidden;
}
.modal{
    position:fixed;
    top:15%;
    right:0;
    bottom:0;
    left:0;
    z-index:1050;
    display:none;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    outline:0
}
.modal.fade .modal-dialog{
    -webkit-transform:translate(0,-25%);
    -ms-transform:translate(0,-25%);
    -o-transform:translate(0,-25%);
    transform:translate(0,-25%);
    -webkit-transition:-webkit-transform .3s ease-out;
    -o-transition:-o-transform .3s ease-out;
    transition:-webkit-transform .3s ease-out;
    transition:transform .3s ease-out;
    transition:transform .3s ease-out,-webkit-transform .3s ease-out,-o-transform .3s ease-out
}
.modal.in .modal-dialog{
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0)
}
.modal-open .modal{
    overflow-x:hidden;
    overflow-y:auto
}
.modal-dialog{
    position:relative;
    width:auto;
    margin:10px
}
.modal-content{
    position:relative;
    background-color: rgb(12, 13, 13, 1);
    background-clip:padding-box;
    border: 4px solid white;
    border-radius: 20px;
    color: white;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
    box-shadow:0 3px 9px rgba(0,0,0,.5);
    outline:0
}
.modal-backdrop{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1040;
    background-color:#000
}
.modal-backdrop.fade{
    filter:alpha(opacity=0);
    opacity:0
}
.modal-backdrop.in{
    filter:alpha(opacity=50);
    opacity:.5
}
.modal-header{
    padding:15px;
    border-bottom:1px solid #e5e5e5;
    color: white;
}
.modal-header .close{
    margin-top:-2px
}
.modal-title{
    margin:0;
    line-height:1.42857143;
    font-size: 23px;
    color: #fa6726;
}
.modal-body{
    position:relative;
    padding:15px
}
.modal-footer{
    padding:15px;
    text-align:center;
    border-top:1px solid #e5e5e5
}
.modal-footer .btn+.btn{
    margin-bottom:0;
    margin-left:5px
}
.modal-footer .btn-group .btn+.btn{
    margin-left:-1px
}
.modal-footer .btn-block+.btn-block{
    margin-left:0
}
.modal-scrollbar-measure{
    position:absolute;
    top:-9999px;
    width:50px;
    height:50px;
    overflow:scroll
}


@media (min-width:768px){
    .modal-dialog{
        width:600px;
        margin:30px auto
    }
    .modal-content{
        -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
        box-shadow:0 5px 15px rgba(0,0,0,.5)
    }
    .modal-sm{
        width:300px
    }
}
@media (min-width:992px){
    .modal-lg{
        width:900px
    }
}

.form-control{
    display:block;
    width:95%;
    height:34px;
    padding:6px 12px;
    font-size:14px;
    line-height:1.42857143;
    color:#f66531;
    background-color:#1A1D1D;
    background-image:none;
    border:1px solid #f66531;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s
}

.form-control:focus{
    border-color:#2b6cbd;
    outline:0;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.form-control::-moz-placeholder{
    color:#999;
    opacity:1
}
.form-control:-ms-input-placeholder{
    color:#999
}
.form-control::-webkit-input-placeholder{
    color:#999
}
.form-control::-ms-expand{
    background-color:transparent;
    border:0
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{
    background-color:#eee;
    opacity:1
}
.form-control[disabled],fieldset[disabled] .form-control{
    cursor:not-allowed
}
textarea.form-control{
    height:auto
}
@media screen and (-webkit-min-device-pixel-ratio:0){
    input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control{
        line-height:34px
    }
    .input-group-sm input[type=date],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],.input-group-sm input[type=time],input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm,input[type=time].input-sm{
        line-height:30px
    }
    .input-group-lg input[type=date],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],.input-group-lg input[type=time],input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg,input[type=time].input-lg{
        line-height:46px
    }
}
.form-group{
    margin-bottom:15px
}
.checkbox,.radio{
    position:relative;
    display:block;
    margin-top:10px;
    margin-bottom:10px
}
.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{
    cursor:not-allowed
}
.checkbox label,.radio label{
    min-height:20px;
    padding-left:20px;
    margin-bottom:0;
    font-weight:400;
    cursor:pointer
}
.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{
    position:absolute;
    margin-top:4px\9;
    margin-left:-20px
}
.checkbox+.checkbox,.radio+.radio{
    margin-top:-5px
}
.checkbox-inline,.radio-inline{
    position:relative;
    display:inline-block;
    padding-left:20px;
    margin-bottom:0;
    font-weight:400;
    vertical-align:middle;
    cursor:pointer
}
.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{
    cursor:not-allowed
}
.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{
    margin-top:0;
    margin-left:10px
}

/* toggle-pill-color */
.toggle-pill-color input[type="checkbox"] {
    display: none;
}
.toggle-pill-color input[type="checkbox"] + label {
    display: block;
    position: relative;
    width: 3em;
    height: 1.6em;
    margin-bottom: 20px;
    border-radius: 1em;
    background: #e84d4d;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
.toggle-pill-color input[type="checkbox"] + label:before {
    content: "";
    display: block;
    width: 1.2em;
    height: 1.2em;
    border-radius: 1em;
    background: #fff;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.toggle-pill-color input[type="checkbox"]:checked + label {
    background: #47cf73;
}
.toggle-pill-color input[type="checkbox"]:checked + label:before {
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
    left: 1.6em;
}
/* toggle-pill-color end */
.product-input-name {
    padding-top:40px;
}

.form-control-static{
    min-height:34px;
    padding-top:7px;
    padding-bottom:7px;
    margin-bottom:0
}
.form-control-static.input-lg,.form-control-static.input-sm{
    padding-right:0;
    padding-left:0
}
.input-sm{
    height:30px;
    padding:5px 10px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px
}
select.input-sm{
    height:30px;
    line-height:30px
}
select[multiple].input-sm,textarea.input-sm{
    height:auto
}
.form-group-sm .form-control{
    height:30px;
    padding:5px 10px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px
}
.form-group-sm select.form-control{
    height:30px;
    line-height:30px
}
.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{
    height:auto
}
.form-group-sm .form-control-static{
    height:30px;
    min-height:32px;
    padding:6px 10px;
    font-size:12px;
    line-height:1.5
}
.input-lg{
    height:46px;
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333;
    border-radius:6px
}
select.input-lg{
    height:46px;
    line-height:46px
}
select[multiple].input-lg,textarea.input-lg{
    height:auto
}
.form-group-lg .form-control{
    height:46px;
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333;
    border-radius:6px
}
.form-group-lg select.form-control{
    height:46px;
    line-height:46px
}
.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{
    height:auto
}
.form-group-lg .form-control-static{
    height:46px;
    min-height:38px;
    padding:11px 16px;
    font-size:18px;
    line-height:1.3333333
}
.has-feedback{
    position:relative
}
.has-feedback .form-control{
    padding-right:42.5px
}
.form-control-feedback{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    display:block;
    width:34px;
    height:34px;
    line-height:34px;
    text-align:center;
    pointer-events:none
}
.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{
    width:46px;
    height:46px;
    line-height:46px
}
.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{
    width:30px;
    height:30px;
    line-height:30px
}
.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{
    color:#3c763d
}
.has-success .form-control{
    border-color:#3c763d;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075)
}
.has-success .form-control:focus{
    border-color:#2b542c;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168
}
.has-success .input-group-addon{
    color:#3c763d;
    background-color:#dff0d8;
    border-color:#3c763d
}
.has-success .form-control-feedback{
    color:#3c763d
}
.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{
    color:#8a6d3b
}
.has-warning .form-control{
    border-color:#8a6d3b;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075)
}
.has-warning .form-control:focus{
    border-color:#66512c;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b
}
.has-warning .input-group-addon{
    color:#8a6d3b;
    background-color:#fcf8e3;
    border-color:#8a6d3b
}
.has-warning .form-control-feedback{
    color:#8a6d3b
}
.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{
    color:#a94442
}
.has-error .form-control{
    border-color:#a94442;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075)
}
.has-error .form-control:focus{
    border-color:#843534;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}
.has-error .input-group-addon{
    color:#a94442;
    background-color:#f2dede;
    border-color:#a94442
}
.has-error .form-control-feedback{
    color:#a94442
}
.has-feedback label~.form-control-feedback{
    top:25px
}
.has-feedback label.sr-only~.form-control-feedback{
    top:0
}
.help-block{
    display:block;
    margin-top:5px;
    margin-bottom:10px;
    color:#737373
}
@media (min-width:768px){
    .form-inline .form-group{
        display:inline-block;
        margin-bottom:0;
        vertical-align:middle
    }
    .form-inline .form-control{
        display:inline-block;
        width:auto;
        vertical-align:middle
    }
    .form-inline .form-control-static{
        display:inline-block
    }
    .form-inline .input-group{
        display:inline-table;
        vertical-align:middle
    }
    .form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{
        width:auto
    }
    .form-inline .input-group>.form-control{
        width:100%
    }
    .form-inline .control-label{
        margin-bottom:0;
        vertical-align:middle
    }
    .form-inline .checkbox,.form-inline .radio{
        display:inline-block;
        margin-top:0;
        margin-bottom:0;
        vertical-align:middle
    }
    .form-inline .checkbox label,.form-inline .radio label{
        padding-left:0
    }
    .form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{
        position:relative;
        margin-left:0
    }
    .form-inline .has-feedback .form-control-feedback{
        top:0
    }
}
.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{
    padding-top:7px;
    margin-top:0;
    margin-bottom:0
}
.form-horizontal .checkbox,.form-horizontal .radio{
    min-height:27px
}
.form-horizontal .form-group{
    margin-right:-15px;
    margin-left:-15px
}
@media (min-width:768px){
    .form-horizontal .control-label{
        padding-top:7px;
        margin-bottom:0;
        text-align:right
    }
}
.form-horizontal .has-feedback .form-control-feedback{
    right:15px
}
@media (min-width:768px){
    .form-horizontal .form-group-lg .control-label{
        padding-top:11px;
        font-size:18px
    }
}
@media (min-width:768px){
    .form-horizontal .form-group-sm .control-label{
        padding-top:6px;
        font-size:12px
    }
}
.btn{
    display:inline-block;
    margin-bottom:0;
    font-weight:400;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    padding:6px 12px;
    font-size:14px;
    line-height:1.42857143;
    border-radius:4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px
}
.btn.focus,.btn:focus,.btn:hover{
    color:#333;
    text-decoration:none
}
.btn.active,.btn:active{
    background-image:none;
    outline:0;
    -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{
    cursor:not-allowed;
    filter:alpha(opacity=65);
    opacity:.65;
    -webkit-box-shadow:none;
    box-shadow:none
}
a.btn.disabled,fieldset[disabled] a.btn{
    pointer-events:none
}
.btn-default{
    color:#333;
    background-color:#fff;
    border-color:#ccc
}
.btn-default.focus,.btn-default:focus{
    color:#333;
    background-color:#e6e6e6;
    border-color:#8c8c8c
}
.btn-default:hover{
    color:#333;
    background-color:#e6e6e6;
    border-color:#adadad
}
.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{
    color:#333;
    background-color:#e6e6e6;
    background-image:none;
    border-color:#adadad
}
.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{
    color:#333;
    background-color:#d4d4d4;
    border-color:#8c8c8c
}
.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{
    background-color:#fff;
    border-color:#ccc
}
.btn-default .badge{
    color:#fff;
    background-color:#333
}
.btn-primary{
    color:#fff;
    background-color:#337ab7;
    border-color:#2e6da4;
    transition: 0.4s;
    margin-left: 20px;
    margin-bottom: 60px;
    border-radius: 10px;
}
.btn-primary.focus,.btn-primary:focus{
    color:#fff;
    background-color:#286090;
    border-color:#122b40
}
.btn-primary:hover{
    color:#fff;
    background-color:#286090;
    border-color:#204d74;
    border-radius: 15px;
}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{
    color:#fff;
    background-color:#286090;
    background-image:none;
    border-color:#204d74
}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{
    color:#fff;
    background-color:#204d74;
    border-color:#122b40
}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{
    background-color:#337ab7;
    border-color:#2e6da4
}
.btn-primary .badge{
    color:#337ab7;
    background-color:#fff
}
.btn-add{
    color:#fff;
    background-color:#3C9844;
    transition: 0.4s;
    margin-right: -15px;
    font-weight: bold;
    padding: 10px;
    width: 25%;
    border-radius: 10px;
}
.btn-add.focus,.btn-add:focus{
    color:#fff;
    background-color:#27712D;
}
.btn-add:hover{
    color:#fff;
    background-color:#27712D;
    border-radius: 20px;
}
.btn-success{
    color:#fff;
    background-color:#5cb85c;
    border-color:#4cae4c
}
.btn-success.focus,.btn-success:focus{
    color:#fff;
    background-color:#449d44;
    border-color:#255625
}
.btn-success:hover{
    color:#fff;
    background-color:#449d44;
    border-color:#398439
}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{
    color:#fff;
    background-color:#449d44;
    background-image:none;
    border-color:#398439
}
.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{
    color:#fff;
    background-color:#398439;
    border-color:#255625
}
.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{
    background-color:#5cb85c;
    border-color:#4cae4c
}
.btn-success .badge{
    color:#5cb85c;
    background-color:#fff
}
.btn-info{
    color:#fff;
    background-color:#5bc0de;
    border-color:#46b8da
}
.btn-info.focus,.btn-info:focus{
    color:#fff;
    background-color:#31b0d5;
    border-color:#1b6d85
}
.btn-info:hover{
    color:#fff;
    background-color:#31b0d5;
    border-color:#269abc
}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{
    color:#fff;
    background-color:#31b0d5;
    background-image:none;
    border-color:#269abc
}
.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{
    color:#fff;
    background-color:#269abc;
    border-color:#1b6d85
}
.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{
    background-color:#5bc0de;
    border-color:#46b8da
}
.btn-info .badge{
    color:#5bc0de;
    background-color:#fff
}
.btn-warning{
    color:#fff;
    background-color:#f0ad4e;
    border-color:#eea236
}
.btn-warning.focus,.btn-warning:focus{
    color:#fff;
    background-color:#ec971f;
    border-color:#985f0d
}
.btn-warning:hover{
    color:#fff;
    background-color:#ec971f;
    border-color:#d58512
}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{
    color:#fff;
    background-color:#ec971f;
    background-image:none;
    border-color:#d58512
}
.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{
    color:#fff;
    background-color:#d58512;
    border-color:#985f0d
}
.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{
    background-color:#f0ad4e;
    border-color:#eea236
}
.btn-warning .badge{
    color:#f0ad4e;
    background-color:#fff
}
.btn-danger{
    color:#fff;
    background-color:#d9534f;
    border-color:#d43f3a;
    transition: 0.4s;
    margin-bottom: 60px;
    margin-right: 20px;
    border-radius: 10px;
}
.btn-danger.focus,.btn-danger:focus{
    color:#fff;
    background-color:#c9302c;
    border-color:#761c19
}
.btn-danger:hover{
    color:#fff;
    background-color:#c9302c;
    border-color:#ac2925;
    border-radius: 15px;
}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{
    color:#fff;
    background-color:#c9302c;
    background-image:none;
}
.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{
    color:#fff;
    background-color:#ac2925;
    border-color:#761c19;
}
.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{
    background-color:#d9534f;
    border-color:#d43f3a
}
.btn-danger .badge{
    color:#d9534f;
    background-color:#fff
}
.btn-link{
    font-weight:400;
    color:#337ab7;
    border-radius:0
}
.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{
    background-color:transparent;
    -webkit-box-shadow:none;
    box-shadow:none
}
.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{
    border-color:transparent
}
.btn-link:focus,.btn-link:hover{
    color:#23527c;
    text-decoration:underline;
    background-color:transparent
}
.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{
    color:#777;
    text-decoration:none
}
.btn-group-lg>.btn,.btn-lg{
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333;
    border-radius:6px
}
.btn-group-sm>.btn,.btn-sm{
    padding:5px 10px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px
}
.btn-group-xs>.btn,.btn-xs{
    padding:1px 5px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px
}
.btn-block{
    display:block;
    width:100%
}
.btn-block+.btn-block{
    margin-top:5px
}
input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{
    width:100%
}
.fade{
    opacity:0;
    -webkit-transition:opacity .15s linear;
    -o-transition:opacity .15s linear;
    transition:opacity .15s linear
}
.fade.in{
    opacity:1
}

.path-card {
    display: flex;
    flex: 0 1 300px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / 3);
    margin: 10px;
    color: var(--color-red);
    border: solid;
    border-radius: 5px;
}

.path-card-live {
    display: flex;
    flex: 0 1 300px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / 3);
    margin: 10px;
    color: var(--color-green);
    background-color: var(--foreground-color);
    border: solid;
    border-radius: 5px;
}

.talk-bubble {
    margin: 40px;
    display: flex;
    position: relative;
    width: 200px;
    height: auto;
    background-color: lightyellow;
}


.talk-bubble-vss {
    margin: 40px;
    display: flex;
    position: relative;
    height: auto;
    margin: 0 0 0 0;
    background-color: #3880F5;
}

.talk-bubble-lead {
    display: flex;
    position: relative;
    height: auto;
    background-color: #FFF;
    margin: auto 0 auto auto;
}

.border-vss {
    border: 8px solid #3880F5;
}

.border-lead {
    border: 8px solid #FFF;
}

.round {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}

.tri-right.left-top:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: #666 #666 transparent transparent;
}

.tri-right.left-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -8px;
    right: auto;
    top: auto;
    bottom: -40px;
    border: 32px solid;
    border-color: transparent transparent transparent #666;
}

.tri-right.btm-left:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 30px;
    right: auto;
    top: auto;
    bottom: -40px;
    border: 20px solid;
    border-color: #3880F5 transparent transparent #3880F5;
}

.tri-right.btm-left-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 38px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 12px solid;
    border-color: #3880F5 transparent transparent #3880F5;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 30px;
    bottom: -40px;
    border: 20px solid;
    border-color: #FFF #FFF transparent transparent;
}

.tri-right.btm-right-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 38px;
    bottom: -20px;
    border: 12px solid;
    border-color: #FFF #FFF transparent transparent;
}

/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -8px;
    bottom: -40px;
    border: 20px solid;
    border-color: #666 #666 transparent transparent;
}

.tri-right.btm-right:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 0px;
    bottom: -20px;
    border: 12px solid;
    border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: #666 transparent transparent #666;
}

.tri-right.right-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}

.tri-right.right-top:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext {
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
}

.talktext p {
    /* remove webkit p margins */
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

@media (max-width: 650px) {
    .path-cards {
        flex-direction: column;
    }

    .path-card {
        max-width: 300px;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
}

/* Content Style and Typography
------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-family: "Benzin", serif;
    color: var(--text-color);
    padding: 10px;
}

h1 {
    font-weight: 700;
}

h2 {
    font-weight: 500;
}

p,
li {
    font-family: "Jeko", serif;
    color: var(--text-color);
    font-size: large;
}

a {
    text-decoration: none;
    color: var(--color-purple);
    font-weight: 600;
}

.red-text {
    color: var(--color-red);
}

.tip-text {
    color: var(--color-beige);
}

.green-text {
    color: var(--color-green);
}

.hyperlink {
    color: var(--color-hyperlink);
}

.boolean-list {
    list-style: none;
}

.spoken-phrase {
    color: var(--color-aqua);
}

.path-cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
}

@media print {
    header {
        position: relative;
    }

    main {
        padding: 20px 10px 0 10px;
    }

    #nav {
        display: none;
    }

    .card {
        margin-bottom: 10px;
        padding: 10px 10px;
    }

    #paths {
        display: none;
    }
}

/* Table Styles */

.table-wrapper{
    margin: 10px 70px 70px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.table-wrapper2{
    margin-bottom: 100px;
    margin-top: 25px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.factory-table-wrapper{
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    width:40%;
    display: none;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.finance-table {
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    border-radius: 20px;
    max-width: 100%;
    white-space: nowrap;
    color: white;
}

.finance-table td, .finance-table th {
    text-align: center;
    padding: 13px;
}

.finance-table td {
    font-size: 17px;
}

.finance-table td:nth-col(odd) {
    font-size: 17px;
}


.finance-table thead th {
    color: #ffffff;
    background: rgb(250, 70, 22, 0.5);
}


.finance-table thead th:nth-child(odd) {
    color: #ffffff;
    background: rgb(25, 118, 210, 0.6);

}

.finance-table tr:nth-child(even) {
    background: rgb(25, 118, 210, 0.2);

}

.finance-table tr:nth-child(odd) {
    background-color: rgb(250, 70, 22, 0.2);

}

.finance-table2 {
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    align-content: center;
    justify-content: center;
    border-radius: 20px;
    max-width: 100%;
    white-space: nowrap;
    color: white;
}

.finance-table2 td, .finance-table2 th {
    text-align: center;
    padding: 13px;
}

.finance-table2 td {
    font-size: 17px;
}

.finance-table2 td:nth-col(odd) {
    font-size: 17px;
}


.finance-table2 thead th {
    color: #ffffff;
    background: rgb(250, 70, 22, 0.5);
}


.finance-table2 thead th:nth-child(odd) {
    color: #ffffff;
    background: rgb(25, 118, 210, 0.6);

}

.finance-table2 tr:nth-child(even) {
    background: rgb(25, 118, 210, 0.2);

}

.finance-table2 tr:nth-child(odd) {
    background-color: rgb(250, 70, 22, 0.2);

}

.factory-table {
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    border-radius: 20px;
    max-width: 100%;
    white-space: nowrap;
    color: white;
}

.factory-table td, .factory-table th {
    text-align: center;
    padding: 13px;
}

.factory-table td {
    font-size: 17px;
}

.factory-table td:nth-col(odd) {
    font-size: 17px;
}


.factory-table thead th {
    color: #ffffff;
    background: rgb(250, 70, 22, 0.5);
}


.factory-table thead th:nth-child(odd) {
    color: #ffffff;
    background: rgb(25, 118, 210, 0.6);

}

.factory-table tr:nth-child(even) {
    background: rgb(25, 118, 210, 0.2);

}

.factory-table tr:nth-child(odd) {
    background-color: rgb(250, 70, 22, 0.2);

}

.zip-input {
    background-color: #2B2F2F;
    border-radius: 20px;
    border: 2px solid #e65a23;
    letter-spacing: 6px;
    color: white;
    transition: 0.3s;
}

.zip-input:focus {
    background-color: #1a1d1d;
    border-radius: 20px;
    border: 2px solid #49BD53;
    color: white;
}

.pass-input {
    background-color: #2B2F2F;
    border-radius: 15px;
    border: 2px solid #e65a23;
    color: white;
    font-size: 25px;
    transition: 0.3s;
    width: 300px;
    height: 50px;
    padding-right: 5px;
    padding-left: 15px;
}

.pass-input:focus {
    background-color: #1a1d1d;
    border-radius: 20px;
    border: 2px solid #49BD53;
    color: white;
    outline: none;
}

.password-input-field {
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -80px;
}

.search-button {
    border-radius: 20px;
    background-color: #e65a23;
    cursor: pointer;
    margin-left: 15px;
    transition: 0.3s;
}

.search-button:hover {
    border-radius: 20px;
    background-color: #3C9844;
    margin-left: 15px;
    cursor: pointer;
}

.pass-submit {
    border-radius: 20px;
    background-color: #e65a23;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding: 16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.pass-submit:hover {
    border-radius: 20px;
    background-color: #3C9844;
    margin-left: 15px;
    cursor: pointer;
}

@-webkit-keyframes pulse {
    0% { box-shadow:0 0 8px #ea4c89, inset 0 0 8px #ea4c89; }
    50% { box-shadow:0 0 16px #ea4c89, inset 0 0 14px #ea4c89; }
    100% { box-shadow:0 0 8px #ea4c89, inset 0 0 8px #ea4c89; }
}

.nav-icon1 {
    transition: 0.3s;
}

.nav-icon2 {
    transition: 0.3s;
}

.nav-icon3 {
    transition: 0.3s;
}

.nav-icon1:hover {
    transition: 0.3s;
    border-radius:50px;
    box-shadow: 0 0 12px #fa6426, inset 0 0 8px #fa6426;
}

.nav-icon2:hover {
    transition: 0.3s;
    border-radius:50px;
    box-shadow: 0 0 12px #2b6cbd, inset 0 0 8px #2b6cbd;
}

.nav-icon3:hover {
    transition: 0.3s;
    border-radius:50px;
    box-shadow: 0 0 12px #ebe9e8, inset 0 0 8px #ebe9e8;
}

ul{
    position: fixed;
    top: 95%;  left: 4.5%;
    transform: translate(-100%,-100%);
    width: 15px;  height: 50px;
    background: #fa6825;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}
ul:hover{
    background: #fa4b27;
}
ul li{
    list-style: none;
    position: absolute;
    transform: translateY(-50%);
    width: 70%;  height: 5px;
    background: #fff;
    transition: 0.7s;
}
ul li:nth-of-type(1){
    top: 30%;  left: 15%;
    transition-delay: 1s;
    opacity: 1;
}
ul li:nth-of-type(2){
    top: 50%;  left: 15%;
    transition-delay: 0s;
}
ul li:nth-of-type(3){
    top: 70%;  right: 15%;
    transition-delay: 1s;
    opacity: 1;
}
ul.active li:nth-of-type(1){
    left: 100%;
    transition-delay: 0s;
    opacity: 0;
}
ul.active li:nth-of-type(2){
    transform: translateY(-50%) rotate(405deg);
    transition-delay: .5s;
}
ul.active li:nth-of-type(3){
    right: 100%;
    transition-delay: 0s;
    opacity: 0;
}

ul li:nth-of-type(2)::before{
    content: '';
    position: absolute;
    top: -150px;  left: 0;
    width: 100%;  height: 100%;
    background: #fff;
    transform: rotate(90deg);
    transition: 1s;
    transition-delay: .5s;
}
ul.active li:nth-of-type(2)::before{
    top: 0;
    transition-delay: 1s;
}


/* Responsive */

@media (max-width: 767px) {
    .finance-table {
        display: block;
        width: 100%;
    }
    .table-wrapper:before{
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: white;
        padding: 0 0 10px;
    }
    .finance-table thead, .finance-table tbody, .finance-table thead th {
        display: block;
    }
    .finance-table thead th:last-child{
        border-bottom: none;
    }
    .finance-table thead {
        float: left;
    }
    .finance-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .finance-table td, .finance-table th {
        padding: 20px .625em .625em .625em;
        height: 60px;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 120px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .finance-table thead th {
        text-align: left;
        border-bottom: 1px solid #f7f7f9;
    }
    .finance-table tbody tr {
        display: table-cell;
    }
    .finance-table tbody tr:nth-child(odd) {
        background: none;
    }
    .finance-table tr:nth-child(even) {
        background: transparent;
    }
    .finance-table tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .finance-table tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .finance-table tbody td {
        display: block;
        text-align: center;
    }
}