/* ---- TOP LEVEL GRID LAYOUT ---- */
.top-menu,
.basic-page-grid,
.selected-hypernode {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto;
    grid-gap: 0;
    max-width: 100%;
    margin: 0 auto;
}
.no-sidebar .top-menu,
.no-sidebar .basic-page-grid {
    display: grid;
    grid-template-columns: 0 auto;
    grid-template-rows: auto;
    grid-gap: 0;
    max-width: 100%;
    margin: 0 auto;
}
.page,
.selected-hypernode-details {
    position: relative;
    max-width: 1100px;
    width: calc(100% - 60px);
    margin: 0 auto;
}
.no-header .cp-main-header,
.no-header .sub-footer {
    display: none;
}
.page {
    padding-top: 50px;
}
.no-sidebar .page {
    max-width: 1400px;
    width: 1400px;
}
.no-sidebar.order-page .page {
    max-width: 100%;
    width: 100%;
    padding-top: 0;
}
.basic-page-grid {
    min-height: calc(100vh - 100px);
}

/* LAPTOP */
@media screen and (max-width: 1442px) {
    .top-menu,
    .basic-page-grid,
    .selected-hypernode {
        grid-template-columns: min-content auto;
    }
    .page,
    .selected-hypernode-details {
        max-width: 820px;
    }
    .no-sidebar .page {
        max-width: 890px;
        width: 890px;
    }
}
@media screen and (max-width: 900px) {
    .top-menu,
    .basic-page-grid,
    .selected-hypernode {
        grid-template-columns: min-content auto;
    }
    .page,
    .no-sidebar .page,
    .selected-hypernode-details {
        max-width: 100%;
    }
    .page {
        padding-top: 35px;
    }
}

/* MOBILE */
@media screen and (max-width: 420px) {
    .top-menu,
    .basic-page-grid,
    .selected-hypernode {
        grid-template-columns: 100%;
    }
}

/* general typography */
.dark-blue-theme *,
.dark-blue-theme h1,
.dark-blue-theme h2,
.dark-blue-theme h3,
.dark-blue-theme h4,
.dark-blue-theme h5,
.dark-blue-theme h6,
.dark-blue-theme p,
.dark-blue-theme b,
.clear-dark-blue-theme h1,
.clear-dark-blue-theme h2,
.clear-dark-blue-theme h3,
.clear-dark-blue-theme h4,
.clear-dark-blue-theme h5,
.clear-dark-blue-theme h6,
.clear-dark-blue-theme p,
.clear-dark-blue-theme b {
    color: #ffffff;
}
.dark-blue-theme h1 span,
.dark-blue-theme h2 span {
    color: #ff7101;
}

[type="submit"] {
    -webkit-appearance: none;
}
h2 {
    font-size: 24px;
}
/* ----------------- themes ------------------------------------*/
.dark-blue-theme,
.light-blue-theme,
.white-theme {
    position: relative;
}
.dark-blue-theme {
    background: rgb(0, 93, 171);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        -moz-linear-gradient(-45deg, rgba(0, 93, 171, 1) 0%, rgba(0, 82, 158, 1) 74%, rgba(0, 65, 140, 1) 100%);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        -webkit-linear-gradient(-45deg, rgba(0, 93, 171, 1) 0%, rgba(0, 82, 158, 1) 74%, rgba(0, 65, 140, 1) 100%);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        linear-gradient(135deg, rgba(0, 93, 171, 1) 0%, rgba(0, 82, 158, 1) 74%, rgba(0, 65, 140, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005dab', endColorstr='#00418c',GradientType=1 );
    background-size: 100%;
}

.light-blue-theme {
    background: url(https://static.hypernode.com/img/background/isometric-bg-light.png) #eef8ff;
    background-size: 100%;
}

.clear-dark-blue-theme {
    background: rgb(0, 93, 171);
}

.clear-light-blue-theme {
    background: #f8fcff;
}

.clear-white-theme {
    background: #ffffff;
}

.grey-theme {
    background: #f5f6f8;
}
@media screen and (max-width: 1920px) {
    .dark-blue-theme,
    .light-blue-theme {
        background-size: 1936px;
    }
}
/* ---- HEADER ---- */
.cp-main-header {
    background: #ffffff;
    border-bottom : 1px solid #d9e7f3;
}
.container-header {
    height: 72px;
}

.light-blue-theme .top-menu,
.white-theme .top-menu {
    height: 130px;
    margin: 0 -15px 30px;
    background: rgb(0, 82, 140);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        -moz-linear-gradient(-45deg, rgba(0, 82, 140, 1) 0%, rgba(0, 55, 109, 1) 100%);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        -webkit-linear-gradient(-45deg, rgba(0, 82, 140, 1) 0%, rgba(0, 55, 109, 1) 100%);
    background-image: url(https://static.hypernode.com/img/background/isometric-bg-dark.png),
        linear-gradient(135deg, rgba(0, 82, 140, 1) 0%, rgba(0, 55, 109, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00528c', endColorstr='#00376d',GradientType=1 );
    background-size: 100%;
}

.logo.top {
    position: absolute;
    width: 180px;
    top: 11px;
    left: 0;
}
.berend-logo {
    display: none;
}

.top-nav {
    position: relative;
    top: 0;
    text-align: center;
    padding: 0 20px;
}
.top-nav a {
    text-decoration: none;
}
.tool-title {
    position: relative;
    top: 32px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: -0.5px;
}

.top-nav .user.navbar {
    position: absolute;
    right: 20px;
}
.top-nav .user {
    top: 25px;
    padding: 0;
}
.top-nav .links ul > li > a {
    font-size: 14px;
}

.top-nav a {
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
}

.top-nav .user {
    display: inline-block;
    position: relative;
}

.top-nav .user li.dropdown a {
    padding: 0;
    line-height: 46px;
    width: 100%;
    display: inline-block;
    position: relative;
}

.top-nav .user li.dropdown > a:hover {
    background: none;
    color: #ffffff;
}

.dropdown-toggle::after {
    display: none;
}

.top-nav .user li.dropdown > a span {
    margin-right: 10px;
}

.top-nav .user.navbar .dropdown-menu {
    border-radius: 20px;
    padding: 0 20px 20px;
    width: 320px;
    min-width: 250px;
    float: none;
    left: auto;
    right: 0;
}

.top-nav .user.navbar .dropdown-menu > li {
    position: relative;
    border-radius: 18px;
    line-height: 36px;
    height: 36px;
    margin-top: 7px;
}
.top-nav .user.navbar .dropdown-menu > li a {
    font-weight: 400;
    line-height: 36px;
    border-radius: 18px;
    padding: 0 18px;
}

.top-nav .user.navbar:hover .dropdown-menu {
    display: block;
}

.top-nav .user .dropdown-menu li a {
    color: #00366c;
}

.top-nav .user .dropdown-menu li a.cp.disabled:before {
    position: absolute;
    left: 0;
}
.top-nav .user .dropdown-menu p {
    position: relative;
    z-index: 1001;
    font-size: 14px;
    background: #e5eaf0;
    margin: 0 -20px;
    padding: 0 15px;
    line-height: 41px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #00366c;
}

/* LAPTOP */
@media screen and (max-width: 1442px) {
    .tool-title {
        font-size: 24px;
        letter-spacing: -0.39px;
    }
}
@media screen and (max-width: 1200px) {
    .greeting {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .container-header {
        height: 85px;
    }
    .logo.top {
        width: 190px;
    }
    .tool-title {
        top: 23px;
        font-size: 19px;
        letter-spacing: -0.25px;
    }
    .top-nav {
        top: 0;
    }
    .top-nav .user {
        top: 17px;
    }
}
/* TABLET */
@media screen and (max-width: 768px) {
    .top-nav {
        padding: 0;
    }
    .top-nav .user li.dropdown {
        padding: 0 0 0 25px;
    }
    .user-logo {
        width: 32px;
    }
}
/* MOBILE */
@media screen and (max-width: 420px) {
    .container-header {
        height: 80px;
    }
    .logo.top {
        width: 47px;
        left: 10px;
    }
    .hypernode-logo {
        display: none;
    }
    .berend-logo {
        display: inline-block;
    }
    .top-nav {
        top: 0;
    }
    .tool-title {
        top: 32px;
        font-size: 15px;
        letter-spacing: -0.29px;
    }
    .top-nav .user.navbar {
        right: 10px;
    }
    .top-nav .user.navbar .dropdown-toggle img {
        width: 47px;
    }
    .top-nav .user.navbar .dropdown-menu {
        width: calc(100vw - 20px);
    }
}

/* ---- CONTENT  ---- */
.content-container {
    padding-bottom: 50px;
}

.small-link {
    margin-top: 5px;
    margin-bottom: 60px;
}

.small-link a {
    font-size: 13px;
}

.register-button span {
    display: block;
    margin-bottom: 10px;
}

.register-button {
    margin-bottom: 50px;
}

/* ---- FOOTER ---- */
.sub-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.sub-footer a {
    color: inherit;
}

/* errors */
.alert-danger {
    color: #d10000;
    background: #ffffff;
    border: none;
    border-radius: 20px;
    opacity: 0.85;
}
ul.error {
    width: calc(100% - 50px);
    left: 50px;
    font-size: 12px;
}
ul.error li {
    color: #d10000;
    /* opacity: 0.6; */
}
.alert ul.error {
    width: 100%;
    left: 0;
}
ul.error,
.alert ul.error {
    list-style: none;
    text-align: left;
    margin: 5px 0 70px;
}
ul.error > li:not(:last-child),
.alert ul.error > li:not(:last-child) {
    margin-bottom: 10px;
}
ul.error li .fa-exclamation-triangle,
.alert ul.error li .fa-exclamation-triangle {
    position: absolute;
    left: -30px;
    top: 3px;
    display:none;
}
input.error,
textarea.error {
    border-color: #f10000;
}
/* end */

form {
    margin-top: 30px;
}
/* disabled */
.cp-disabled,
.cpn-disabled {
    opacity: 0.3;
}

a.cpn-disabled:hover,
a.btn.cpn-disabled:hover,
.cpn-disabled:hover {
    cursor: not-allowed;
}
.cpn-disabled:hover:before {
    content: "";
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
}
/* disabled (with comming soon label) */
a.cp-disabled:hover,
a.btn.cp-disabled:hover,
.cp-disabled:hover {
    opacity: 1;
    cursor: not-allowed;
}
.cp-disabled:hover:before {
    left: 0;
    content: "Coming soon";
    position: absolute;
    background: #1f6194;
    color: #ffffff;
    border-radius: 18px;
    padding: 0 18px;
    white-space: nowrap;
    z-index: 9999;
}
/* end */
.back {
    margin: 0 0 -10px;
}
.back .fa-chevron-left {
    font-size: 13px;
    color: #ff8201;
    margin-right: 2px;
}

/* overview lists */
table.overview thead {
    border-bottom: none;
    text-align: left;
    line-height: 60px;
}
table.overview tbody tr:nth-child(odd) {
    background: #f0f8ff;
}
table.overview tbody tr:nth-child(even) {
    background: none;
}
table.overview.striped tbody tr,
table.overview tbody tr.striped {
    background-image: url(https://static.hypernode.com/img/background/list-item-striped-bg.png);
    background-size: 120px;
}
table.overview tr td {
    padding: 20px 10px;
}
table.overview tr td.icon {
    width: 87px;
}
table.overview tr td.icon img {
    width: 100%;
}
table.overview tbody tr td.action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
table.overview tbody tr td.action a {
    text-decoration: none;
}
table.overview tbody tr td.action > * {
    margin-left: 10px;
}
.overview h3 span {
    font-size: 15px;
    font-weight: 400;
}
.overview .sub-title {
    font-size: 18px;
    font-weight: 700;
    color: #368ec4;
    letter-spacing: -0.3px;
    margin-right: 10px;
}

/*  white cancel button */
.btn.white.cancel,
button.white.cancel {
    color: #d10000;
    border-color: #d10000;
}
/* danger button */
button.danger,
.btn.danger,
button[type="submit"].danger {
    background-color: #d10000;
    border: 2px solid #d10000;
    color: #ffffff;
}

button.danger:hover,
.btn.danger:hover,
button[type="submit"].danger:hover {
    opacity: 0.9;
}

/* crown */
@font-face {
    font-family: "Font Awesome 5 Pro";
    src: url("https://static.hypernode.com/fontawesome/fa-5.0.13/fa-solid-900.woff") format("woff"),
        url("fa-5.0.13/fa-solid-900.woff") format("woff");
}
.crown::after {
    position: relative;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f521";
    color: #ff7101;
}
/* style hijack for auth */
.hijacked-warning {
    background-color: #ff7101 !important;
    color: #ffffff !important;
    border-radius: 0;
}
.hijacked-warning button {
    border-color: #ffffff;
    color: #ffffff;
}
.hijacked-warning .close {
    opacity: 1;
}
.hijacked-warning .close:hover {
    color: #ffffff;
}

/* 2fa */
.two-factor.page,
.auth-page.page {
    padding-top: 18px;
}

.two-factor h1,
.account-register h1 {
    font-size: 33px;
    line-height: 40px;
}

.two-factor .sub-title,
.account-register .sub-title {
    font-weight: 700;
    line-height: 19px;
}

.two-factor .content-container {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

.two-factor .checkbox-container {
    display: inline-block;
    padding-left: 35px;
}

.two-factor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    margin-bottom: 30px;
}

.two-factor label {
    margin-bottom: 1.5rem;
}

.two-factor button[type="submit"] {
    background-color: #ff7101;
    color: #fff;
    border: 2px solid #ff7101;
}

.two-factor button[type="submit"]:hover {
    background-color: #ff8201;
    border-color: #ff8201;
    color: #fff;
}

.two-factor .qrCode {
    text-align: center;
}

#id_backup-otp_token,
#id_generator-token,
#id_token-otp_token,
#id_otp_token {
    border: none;
    letter-spacing: 14px !important;
    font-size: 24px;
    margin-bottom: 0;
    width: 200px;
    font-family: monospace;
    position: relative;
    left: 6px;
}

#id_backup-otp_token {
    width: 250px;
}

.two-factor label[for="id_backup-otp_token"],
.two-factor label[for="id_generator-token"],
.two-factor label[for="id_token-otp_token"],
.two-factor label[for="id_otp_token"] {
    margin-bottom: 0;
}

#id_backup-otp_token:focus,
#id_generator-token:focus,
#id_token-otp_token:focus,
#id_otp_token:focus {
    outline: none;
}

.dashes {
    position: relative;
    width: 185px;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    margin: 0 auto 30px;
}

.dashes.backup {
    left: 95px;
    width: 239px;
}

.dash {
    display: inline-block;
    height: 1px;
    width: 15px;
    background: #074e8a;
}

.understand-box {
    display: none;
}

.understand-box.show {
    display: block;
}

.imitation-link,
button.imitation-link,
button[type="submit"].imitation-link {
    color: #ff7101;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    font-size: 15px;
    font-weight: 400;
    padding: 0;
}

.imitation-link:hover,
button.imitation-link:hover,
button[type="submit"].imitation-link:hover {
    color: #51b3db;
    border: none;
    background: none;
}

.two-factor p.warning,
a.warning,
.imitation-link.warning,
button.imitation-link.warning {
    color: #d10000;
}

button.danger,
.btn.danger,
button[type="submit"].danger {
    background-color: #d10000;
    border: 2px solid #d10000;
    color: #ffffff;
}

button.danger:hover,
.btn.danger:hover,
button[type="submit"].danger:hover {
    background-color: #d10000;
    border: 2px solid #d10000;
    opacity: 0.9;
}

.two-factor button + a,
.two-factor .btn + a {
    margin-left: 10px;
}

ul.errorlist li {
    color: #d10000;
}
ul.errorlist {
    list-style: none;
    text-align: center;
}
ul.errorlist > li:not(:last-child) {
    margin-bottom: 10px;
}

.two-factor__image {
    margin: 30px 0;
}

.two-factor__back-link-container {
    text-align: left;
    margin: 0 0 18px;
}

.two-factor .anchor-container {
    margin-top: 30px;
}
.two-factor .anchor-container a {
    font-weight: 700;
}

.two-factor__back-link,
.two-factor__back-link:hover {
    text-decoration: none;
}

.two-factor__back-link:before {
    position: relative;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f053";
    margin-right: 10px;
}

.two-factor .key-code__box {
    margin-top: 30px;
}

.two-factor .key-code {
    line-height: 16px;
    font-size: 13px;
    font-weight: 700;
}

.two-factor .key-code,
.two-factor .key-code__button {
    display: none;
}

.two-factor .key-code.show,
.two-factor .key-code__button.show {
    display: block;
}

.two-factor .disable-2fa-button.disabled:hover,
.two-factor .disable-2fa-button.disabled {
    background: #cacaca;
    border-color: #cacaca;
    cursor: not-allowed;
    color: #ffffff;
}

/* Chrome, Safari, Edge, Opera */
.two-factor input::-webkit-outer-spin-button,
.two-factor input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.two-factor input[type="number"] {
    -moz-appearance: textfield;
}

.two-factor .generator {
    position: relative;
    display: block;
    top: 0;
    animation: slide 0.3s ease-in-out forwards;
    -webkit-animation: slide 0.3s ease-in-out forwards;
}

@keyframes slide {
    0% {
        left: 90px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

@-webkit-keyframes slide {
    0% {
        left: 90px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

.terms-and-conditions, .terms-and-conditions a {
    font-size: 13px;
    line-height: 18px;
}

/* Google reCAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}