body {
    font-size: 0.875rem;
    background-color: #fff;
    font-family: 'Rubik';
    font-weight: 400;
}

:root {
    --black:#000;
    --black-text:#000;
    --text:#121614;
    --dark-gray:#404143;
    --gray:#585A5C;
    --shadow:#909192;
    --form-text-color: #495057;
    --light-separator:#E8EAEB;
    --table-separator:#90919280;
    --section-background: #efefef;
    --faded-text:#a8a8a8;
    --warning-section: #ffc645;
    --notification-section: #5CA6C3;
    --msg-error: #F55656;
    --msg-info: #99E6F2;
    --msg-warning: #FFE177;
    --border:#C7C7C8;
    --border-faded:#C7C7C840;
    --icon:#FE9003;
    --icon-faded:#FE900340;
    --light-icon:#FFBF5F;
    --sun-yellow:#FFDC8A;
    --sun-yellow-faded:#FFDC8A40;
    --light-yellow:#FFDC8A;
    --beebyte-off-orange-1: #ffaf00;
    --beebyte-off-orange-1-faded: #ffaf0040;
    --white-fill:#fff;
    --white-text:#fff;
    --active-green: #59E066;
    --active-green-faded: #59E06640;
    --status-red: #DA1A32;
    --status-red-faded: #DA1A3240;
    --inactive-red: #DD4814;
    --blue: #0074EF;
    --admin-red: #D9292979;
    --bankid-blue : #183E4F;
}

a {
    color: #337ab7;
}

.main-content {
    padding-top: 20px;
    padding-bottom: 50px;
}

.cloudheader {
    background: #1e73be url("/static/website/beebyte_bg3.6deeab266134.png") center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 250px;
    z-index: -1;
}

.cloudheader-small {
    background: #1e73be url("/static/website/beebyte_bg3.6deeab266134.png") no-repeat center;
    background-size: cover;
    margin-bottom: 40px;
    padding-top: 100px;
}

.cloudheader-small-reseller {
    background: #6eb3f0 url("/static/website/beebyte_bg3.6deeab266134.png") no-repeat center;
    background-size: cover;
    margin-bottom: 40px;
    padding-top: 100px;
}

.payment-errors {
    color: #ff0000;
}

.bold {
    font-weight: bold;
}

.red {
    color: red;
}

.orange {
    color: orange;
}

.green {
    color: green;
}

.lightblue {
    color: lightblue;
}

.large {
    font-size: 18px;
}

.center {
    text-align: center;
}

#logo-img {
    transition: all 0.4s ease-in-out;
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin-bottom: 0;
    max-height: 200px;
    max-width: 200px;
}

@media (max-width: 768px) /* @grid-float-breakpoint -1 */ {
    .navbar-fixed-top {
        position: absolute;
        top: auto;
    }
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-color: rgb(246, 246, 246);
    border: 1px solid grey;
    border-radius: 5px 5px 5px 5px;
}

.beebyte-navbar {
    background-color: #ffffff;
    padding: 25px;
    padding-bottom: 0px;
    padding-top: 15px;
    color: black;
    font-family: 'Poppins';
    font-weight: normal;
}

.beebyte-navbar .navbar-nav > li {
  transition: color 200ms ease-out, opacity 200ms ease-out;
  width: 100%;
  margin-left: 5px;
  margin-right: 5px;
}

.beebyte-navbar .navbar-nav > li:hover {
  transition: color 200ms ease-out, opacity 200ms ease-out;
}

.org-switcher-nav {
  background-color: #ffffff;
  border-radius: 5px 5px 5px 5px;
  margin-left: 20px;
  border: 1px solid lightgrey;
}

.beebyte-navbar .navbar-nav > li > a > img {
    max-height: 25px;
    display: block;
    margin: 0 auto;
}

.beebyte-navbar .navbar-nav > li > a {
    font-size: 16px;
    font-weight: 600;
    transition: color 500ms ease-out, opacity 200ms ease-out;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.beebyte-navbar .navbar-nav > li > a {
    color: #000000;
    text-align: center;
}

.beebyte-navbar .navbar-nav > li > a:hover,
.beebyte-navbar .navbar-nav > li > a:focus {
  color: #F1A53E;
}

.beebyte-navbar .navbar-nav > li > a:focus {
    color: #808080;
}

.beebyte-navbar .navbar-nav > .open > a,
.beebyte-navbar .navbar-nav > .open > a:active,
.beebyte-navbar .navbar-nav > .open > a:focus,
.beebyte-navbar .navbar-nav > .open > a:hover {
    background: transparent;
    color: #000000;
}

.nav-link-selected {
    color: #F1A53E !important;
    font-weight: bold;
}

.topbar {
    color: #303030;
    background-color: #f2f2f2;
    padding: 10px;
    border-bottom: 1px solid #dfdfdf;
}

.reseller-bubble {
    border-radius: 15px 15px 15px 15px;
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    margin-left: 10px;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

.topbar-iconlink {
    padding-left: 25px;
}

.topbar a {
    color: #303030;
}

.topbar a:hover,
.topbar a:focus {
  text-decoration: none;
}

@media (min-width: 768px) {
    #side-menu-collapse {
        display: block !important;
        visibility: visible !important;
    }
}

.side-menu-display-btn {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: yellow;
    font-size: 16px;
    font-family: 'Poppins';
    font-weight: 300;
    display: block;
    width: 100%;
    border: 1px solid grey;
    line-height: 1.42857143;
    padding: 6px 12px;
    margin-bottom: 15px;
    margin-top: 0px;
    border-radius: 5px 5px 5px 5px;
    outline: 0;
}

.side-menu {
    font-size: 15px;
    color: #777;
    padding-bottom: 25px;
}

.side-menu-heading {
    border-bottom: 1px solid #c0c0c0;
    color: #000000;
    font-family: 'Poppins';
    font-size: 18px;
    font-weight: 400;
    width: 100%
}

.side-menu > li {
    display: block;
    width: 100%;
}

.side-menu > li > a {
    font-size: 15px;
    color: #505050;
    background-color: #fff;
    transition: background-color 250ms ease-out, opacity 250ms ease-out;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 22px;
    margin-top: 1px;
    width: 100%;
    display: block;
}

.side-menu > li > a:hover {
    background-color: rgba(237, 237, 4, 0.23);
    border-radius: 5px;
}

.side-menu a.side-menu-active {
    color: #000000;
    font-weight: bold;
    background-color: #e0e0e0;
    border-radius: 5px;
    width: 100%;
    display: block;
}

.side-menu a.side-menu-super-admin {
    color: #000000;
    font-weight: bold;
    background-color: #ffe0e0;
    border-radius: 5px;
    width: 100%;
    display: block;
}

.super-admin-bg {
    background-color: #ffe0e0;
}

.super-admin-table-column {
    background-color: #fff0f0;
}

.btn-beebyte {
    font-size: 16px;
    font-family: 'Comfortaa', cursive;
    background-color: lightgrey;
    color: #000000;
}

.btn-beebyte-sm {
    font-size: 14px;
}

.btn-beebyte-white {
    background-color: white;
    border-color: #cccccc;
}

.btn-beebyte-white:hover {
    background-color: lightgrey;
    border-color: #cccccc;
}

.btn-navbar {
    background-color: #333333;
    font-weight: normal;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.infosection {
    margin-bottom: 50px;
}

h2.regular {
    font-size: 20px;
    font-weight: 400;
    font-family: 'Poppins';
    margin: 0;
    text-align: center;
}

.infosection h1 {
    margin: 0;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid lightgrey;
}

.infosection h2 {
    font-size: 20px;
    margin: 0;
    font-family: 'Rubik';
    padding-bottom: 5px;
}

.infosection td,
.info-box-body td {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
}

.infosection-h1-right {
    float: right;
    margin-top: -16px;
}

.infosection-outer {
    background-color: #f8f8f8;
    padding: 20px 20px 5px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 7px 14px 0 rgba(50,50,93,.1),0 3px 6px 0 rgba(0,0,0,.07);
}

.infosection-outer > .infosection {
    margin-bottom: 30px;
}

.infosection-inner {
    padding-top: 15px;
    padding-left: 15px;
}

.infosection-inner table th {
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 16px;
    border-top: none;
}

.infotable2 th {
    border-top: none;
}

.infotable th {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 600;
    border-top: none;
}

.infotable td {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
}

.no-border {
    border-top: 0px solid black !important;
}

.infotable-kvp > tbody > tr > td {
    border-top: 0;
}

div.info-box-body td.infotable-kvp-left {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 600;
}

.infotable-super-admin-row {
    background-color: #ffe0e0;
}

.nav-tabs-beebyte li {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 16px;
}

.big-icon {
    background-color: #000000;
    color: #eeee22;
    padding: 20px;
    border-radius: 100px;
}

.medium-icon {
    background-color: #000000;
    color: #eeee22;
    padding: 6px;
    border-radius: 50px;
}

.small-icon {
    background-color: #000000;
    color: #eeee22;
    padding: 6px;
    border-radius: 25px;
}

.infosection-header-icon {
    background-color: #000000;
    color: #eeee22;
    padding: 6px;
    border-radius: 25px;
    vertical-align: super;
}

.setup-sections h1 {
    font-family: 'Poppins';
    font-size: 32px;
    font-weight: 300;
}

.setup-sections h2 {
    font-family: 'Poppins';
    font-size: 28px;
    font-weight: 300;
}

.setup-sections h3 {
    font-family: 'Poppins';
    font-size: 24px;
    font-weight: 300;
}

.setup-sections p {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
    /*text-align: center;*/
}

.infotable-nolines > tbody > tr > td {
    border-top: 0;
}

.index-product-section {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 30px;
    font-family: 'Poppins';
    font-size: 14px;
    font-weight: 400;
}

.index-product-section-logo {
    height: 67px;
    margin-top: 25px;
    margin-bottom: 20px;
}

.index-product-section-btn {
    padding-left: 30px;
    padding-right: 30px;
}

.black-btn {
    font-size: 14px;
    font-family: 'Comfortaa', cursive;
    background-color: #333333;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    font-weight: 600;
    padding-left: 30px;
    padding-right: 30px;
    min-width: 200px;
}

.black-btn:hover {
    background-color: #333333;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.btn-product-section {
    font-size: 14px;
    font-family: 'Comfortaa', cursive;
    background-color: #333333;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    font-weight: 600;
}

.submit-section {
    float: right;
    padding-bottom: 25px;
}

.submit-clear {
    clear: both;
}

div .btn-submit,
div .btn-submit-bankid {
    font-size: 18px;
    font-family: 'Rubik';
    font-weight: 400;
    letter-spacing: 0.01rem;
    background-color: var(--dark-gray);
    color: var(--white-text);
    padding: 3px 11px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

div .btn-submit-bankid {
    background-color: var(--bankid-blue);
}

div .btn-submit:hover,
div .btn-submit-bankid:hover {
    background-color: var(--beebyte-off-orange-1);
}

div .btn-submit:hover {
    background-color: var(--beebyte-off-orange-1);
}

div .btn-cancel {
    font-size: 18px;
    font-family: 'Rubik';
    font-weight: 400;
    background: transparent;
    color: var(--border);

    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    border: 2px solid var(--border);

    padding: 3px 11px;
    margin-right: 5px;
    margin-left: 5px;
}

div .btn-cancel:hover {
    background-color: var(--border);
    color: var(--white-text);
}

.btn-action {
    font-size: 16px;
    background-color: #f0f0f0;
    color: #212529;
}

.btn-action:hover {
    font-size: 16px;
    background-color: #f0f0f0;
    color: #212529;
}

.onapp-provis > h1 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 30px;
    margin-top: 0;
    display: block;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
}

.onapp-provis > h2 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 23px;
    padding-bottom: 10px;
}

.onapp-provis-os h1 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 18px;
    margin-top: 0;
}

.onapp-provis-os p {
    font-size: 14px;
}

.onapp-provis-section {
    background-color: #f8f8f8;
    padding: 10px 20px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
}

.onapp-provis-section-selected {
    background-color: #ffffff;
    border: 2px solid yellowgreen;
}

.onapp-provis-btn {
    font-size: 16px;
    font-family: 'Comfortaa', cursive;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: block;
    background-color: black;
    color: yellow;
}

.onapp-provis-btn:hover {
    background-color: yellow;
    color: black;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: block;
}

.onapp-provis-hostname {
    background-color: #f8f8f8;
    padding: 10px 20px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.onapp-provis-hostname h1 {
    font-size: 18px;
    font-family: 'Poppins';
    margin-top: 0;
}

.onapp-provis-hostname input {
    font-size: 16px;
    width: 100%;
    padding: 3px 3px 3px 6px;
}

.onapp-provis-options {
    font-size: 18px;
}

.onapp-provis-options input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.onapp-provis-options label {
    vertical-align: middle;
    font-weight: normal;
}

#onapp-submitted {
    text-align: center;
    font-size: 20px;
}

.mail-form-section {
    background-color: #f8f8f8;
    padding: 15px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.form-error {
    background-color: #f8f5ab;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-weight: bold;
}

.form-error ul {
    margin: 0;
    list-style-type: none;
    padding-left: 5px;
}

.btn-list-beebyte {
    font-size: 12px;
    padding: 2px 5px;
    background-color: #1e73be;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin-bottom: 2px;
    margin-right: 5px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.btn-list-beebyte:hover {
    background-color: #4ea3fe;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.btn-list-beebyte-active {
    background-color: green;
}

.btn-list-beebyte-active:hover {
    background-color: green;
}

.btn-list-beebyte-warning {
    background-color: rgb(220, 80, 30) !important;
}

.btn-list-beebyte-warning:hover {
    background-color: rgb(180, 50, 20) !important;
    color: #ccc;
}


.btn-table-black {
    font-family: 'Rubik';
    font-size: 14px;
    font-weight: 400;

    border: solid 2px var(--gray);
    background-color: transparent;
    color: var(--black-text);
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;

    padding: 2px 5px;
    margin-bottom: 2px;
    margin-right: 5px;
}

.btn-table-black:hover {
    background-color: var(--gray);
    color: var(--white-text)
}

.compo-content h1 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 32px;
}

.compo-box {
    background-color: #f8f8f8;
    padding: 15px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.provisioning > h1 {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 30px;
    margin-top: 0;
    display: block;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
}

.provisioning > h2 {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 23px;
    padding-bottom: 10px;
}

.provisioning-section,
.clickable-provisioning-section {
    background-color: #f8f8f8;
    padding: 10px 20px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 7px 14px 0 rgba(50,50,93,.1),0 3px 6px 0 rgba(0,0,0,.07);
}

.provisioning_section_selected,
.provisioning-section-selected  {
    background-color: var(--white-fill);
    border: 2px solid var(--beebyte-off-orange-1);
}

.provisioning-section-selected .btn-submit,
.provisioning_section_selected .btn-submit,
.clickable-provisioning-section:hover .btn-submit,
.selected-clickable-provisioning-section .btn-submit {
    background-color: var(--beebyte-off-orange-1);
    color: var(--white-text);
}

.provisioning-section h1,
.clickable-provisioning-section h1{
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 15px;
}

.provisioning-section p,
.clickable-provisioning-section p {
    font-size: 14px;
    margin: 0;
}

.clickable-provisioning-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    cursor: pointer;
    margin: 0 25px 0 25px;
}

.clickable-provisioning-section:hover,
.selected-clickable-provisioning-section {
    outline: 2px solid var(--beebyte-off-orange-1);
}

@media (max-width: 991px) {
    .clickable-provisioning-section {
        margin: 0 0 20px 0;
    }
}



.provisioning-btn {
    font-size: 16px;
    font-family: 'Comfortaa', cursive;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: block;
    background-color: black;
    color: yellow;
    width: 100%;
}

.provisioning-btn:hover {
    background-color: yellow;
    color: black;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: block;
    width: 100%;
}

.provisioning-inputbox {
    background-color: #f8f8f8;
    padding: 10px 20px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 7px 14px 0 rgba(50,50,93,.1),0 3px 6px 0 rgba(0,0,0,.07);
}

.provisioning-inputbox h1 {
    font-size: 18px;
    font-family: 'Poppins';
    font-weight: 300;
    margin-top: 0;
}

.provisioning-inputbox input {
    font-size: 16px;
    display: block;
    padding: 3px 3px 3px 6px;
}

.onapp-provis-options {
    font-size: 18px;
}

.onapp-provis-options input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.onapp-provis-options label {
    vertical-align: middle;
    font-weight: normal;
}

#provisioning-submitted {
    text-align: center;
    font-size: 20px;
}

#provisioning-errormsg {
    font-size: 16px;
}

.subscription-table {
    padding: 5px;
    background-color: white;
    border-radius: 4px;
}

.subscription-table a {
    color: black;
    text-decoration: underline;
}

.subscription-table > table {
    width: 100%;
    max-width: 100%;
    color: black;
}

.subscription-table > table > tbody > tr {
    background-color: #f8f8f8;
}

.subscription-table > table > tbody > tr:nth-child(even) {
    background-color: #e6e6e6;
}

.subscription-table > table > tbody > tr > td {
    border: 2px solid white;
    padding: 7px;
    border-radius: 7px;
}

.monitor-alert-msg {
    border: none;
    padding: 2px;
    margin: 0 0 3px;
}

.round-right {
    border-radius: 0px 4px 4px 0px;
}

.round-left {
    border-radius: 4px 0px 0px 4px
}

.monitoring-overview {
    border: 1px solid darkgrey;
    border-radius: 4px;
    background-color: #eeeeee;
    padding: 10px;
    font-size: 17px;
    margin-bottom: 20px;
    margin-left: 6px;
}

.monitoring-overview-highlight {
    font-size: 20px;
    font-weight: bold;
}

.monitoring-overview > a {
    text-decoration: none;
}

.monitoring-overview > a:hover {
    text-decoration: none;
}

.admin-menu {
    background-color: #eeeeee;
    border-top: 0px;
    border-radius: 4px;
    border: 1px solid #c0c0c0;
    padding: 7px;
    background-color: rgba(224, 69, 69, 0.09);
    margin-bottom: 25px;
}

.infosection-menu {
    background-color: #eeeeee;
    border-top: 0px;
    border-radius: 0px 0px 6px 6px;
    padding: 7px;
    background-color: rgba(240, 240, 240);
}

.btn-infosection-menu {
    font-size: 14px;
    margin-left: 5px;
    margin-bottom: 2px;
    margin-top: 1px;
    font-family: 'Comfortaa', cursive;
    background-color: rgb(70, 130, 180);
    color: #fff;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.btn-infosection-menu:hover {
    background-color: rgb(30, 115, 190);
    color: #ccc;
}

.btn-infosection-menu-highlight {
    background-color: rgb(40, 167, 69) !important;
    color: #fff;
}

.btn-infosection-menu-highlight:hover {
    background-color: rgb(20, 137, 39) !important;
    color: #ccc;
}

.btn-infosection-menu-warning {
    background-color: rgb(220, 80, 30) !important;
    color: #fff;
}

.btn-infosection-menu-warning:hover {
    background-color: rgb(180, 50, 20) !important;
    color: #ccc;
}

.btn-infosection-menu-admin {
    background-color: rgb(220, 80, 30) !important;
    color: #fff;
}

.btn-infosection-menu-admin:hover {
    background-color: rgb(180, 50, 20) !important;
    color: #ccc;
}

.monitor-row-up {
    background-color: rgba(69, 224, 69, 0.09);
}

.monitor-row-down {
    background-color: rgba(224, 69, 69, 0.09);
}

.infosection-list1 {
    padding-left: 20px;
    font-size: 16px;
}

.infosection-list1 li {
    padding: 5px;
}

.domain-search-box {
    background-color: #f8f8f8;
    padding: 20px 20px 5px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-top: 0px;
    border-radius: 0px 0px 4px 4px;
}

.table-icon {
    height: 20px;
}

.table-service-list > tbody > tr > td {
    vertical-align: middle;
    white-space: nowrap;
}

.StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.stripe-form-row {
    width: 70%;
}

#card-errors {
	color: red;
}

.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
    margin-top: 1px;
}

[v-cloak] {
  display: none;
}

.form-group label {
    font-weight: bold;
}

.backup-user {
    background-color: #eeeeee;
}

.backup-volume {
    background-color: #ffffff;
}

.login-lang {
	padding-top: 20px;
}
.login-lang a {
	margin-right: 10px;
}
.login-lang a img{
	max-height: 30px;
}

.btn-login {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Comfortaa', cursive;
    background-color: #404040;
    color: #fff;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    font-family: 'Comfortaa', cursive;
}

.img-wrapper {
  position: relative;
 }

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

.btn-new-webhosting {
    width: 70%;
    line-height: 28px;
    font-size: 21px;
    font-family: 'Comfortaa', cursive;
    background-color: #1e73be;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    font-weight: 600;
}

.btn-new-webhosting:hover {
    background-color: #4ea3fe;
    color: white;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.org-switcher h1 {
    font-size: 22px;
    font-family: 'Poppins';
    font-weight: 300;
}

.super-admin-note {
    background-color: #f8f8f8;
    color: #000000;
    padding: 5px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}

.super-admin-note-sig {
    font-size: 10px;
    color: #606060;
}

.kbnav-highlight-row {
    background-color: #b0cef4 !important;
}
.kbnav-highlight-button {
    background-color: #b0cef4 !important;
}
.wh-label {
    font-size: 12px;
    padding: 2px 5px;
    background-color: #1e73be;
    color: white;
}

.website-type-section {
    background-color: #f8f8f8;
    padding: 10px 20px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 7px 14px 0 rgba(50,50,93,.1),0 3px 6px 0 rgba(0,0,0,.07);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.website_type_section_selected {
    background-color: #ffffff;
    border: 2px solid lightgrey;
}

.website-type-section h1 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.website-type-section p {
    font-size: 14px;
}


h1.webhosting-provisioning-section-title {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 24px;
    margin-top: 0;
    display: block;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
}

.wh-deploy-pending {
  color: grey;
}
.wh-deploy-running {
  color: orange;
}
.wh-deploy-ok {
  color: green;
}
.wh-deploy-failed {
  color: red;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #f9f9f9;
}

.infobox {
  border-radius: 5px;
  margin-bottom: 30px;
  background-color: #FFFFFF;
    border: 1px solid #ececec;

}

.infobox-title {
  background-color: #ececec;
  color: #000000;
  padding: 4px;
  padding-left: 10px;
  font-weight: bold;
  font-size: 16px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.infobox-body {
  padding: 10px;
}

.infobox-label {
    font-size: 14px;
    padding: 8px;
    background-color: #1e73be;
    color: white;
}

.infobox a {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
.infobox a:hover {
    text-decoration: none;
}

.infobox h1 {
    font-size: 18px;
    margin: 0px;
    padding: 0px;
}

.infobox-key {
    width: 180px;
}
.infobox-value {
    font-weight: bold;
}


.info-box {
  border-radius: 3px;
  margin-bottom: 45px;
  background-color: #ffffff;
  box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12) , 0 3px 6px 0 rgba(0,0,0, 0.12);
}

.info-box-title {
  background-color: #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  color: #303030;
  padding: 4px 12px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-family: 'Poppins';
  font-size: 17px;
  font-weight: 300;
}

div .info-box-title-admin {
    background-color: var(--admin-red);
  }

.info-box-body {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 3px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow-x: auto;
}

.info-box-title img {
    height: 33px;
    margin-right: 5px;
}

.link-menu {
  border-radius: 3px;
  margin-bottom: 60px;
  background-color: #f8f8f8;
  box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12) , 0 3px 6px 0 rgba(0,0,0, 0.12);
}

.link-menu-title {
  background-color: #222222;
  color: #FCA113;
  padding: 8px;
  padding-left: 15px;
  font-weight: bold;
  font-size: 15px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.link-menu-body {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-radius: 3px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.link-menu hr {
    border-top: 1px solid #f0f0f0;
}

.link-menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.link-menu li {
    display: inline-block;
    min-width: 33%;
    margin-top: 2px;
    margin-bottom: 2px;
}
.link-menu li:hover {
    background-color: #ebf2fb;
}

@media (max-width: 768px) {
    .link-menu li {
      min-width: 99%;
    }
}
@media (min-width: 769px) and (max-width: 991px) {
    .link-menu li {
      min-width: 49%;
    }
}
@media (min-width: 1200px) {
    .link-menu li {
      min-width: 24%;
    }
}

.link-menu img {
    max-height: 25px;
    padding-right: 10px;
}
.link-menu a {
    font-size: 14px;
    color: #303030;
    width: 100%;
    height: 100%;
    display: inline-block;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 10px;
    white-space: nowrap;
}
.link-menu a:hover {
    text-decoration: none;
}

.link-menu-admin > li{
    background-color: #ffe9e9;
    border-radius: 5px;
}

.link-menu-comment {
    font-size: 10px;
}

.link-menu-active {
    color: #F1A53E !important;
}


.org-switcher-multi-view {
    padding: 10px;
    margin-bottom: 30px;
    background-color: #fdfae8;
    border-radius: 3px;
}


/* Toggle button/switch for org switcher*/
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

.breadcrumb-section {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    background-color: #ffffff;
}
.breadcrumb-section i {
  padding-left: 10px;
  padding-right: 10px;
  color: #808080;
}
.breadcrumb-section a {
}
.breadcrumb_searchbar_active {
    background-color: #333;
    color: #fff;
}
#searchbox {
    border-radius: 15px 15px 15px 15px;
    background-color: #f8f8f8;
    border: 1px solid #d0d0d0;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
    height: 22px;
    width: 80%;
}

#searchbar-input {
    width: 80%;
    background-color: #333;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #fff;
}

.searchbar-results {
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.searchbar-results ul {
    margin: 0;
    list-style-type: none;
    padding: 0px;
    width: 100%
}

.searchbar-results ul li{
  margin: 0px;
}

.searchbar-results ul li a {
    display: inline-block;
    width: 100%;
    background-color: #fff;
    padding: 5px;
    padding-left: 25px;
    color: #337ab7;
}

.searchbar-results ul li a:active,
.searchbar-results ul li a:focus,
.searchbar-results ul li a:hover {
    text-decoration: none;
    background-color: #f0f0f0;
    border: 0px;
}

.searchbar_results_active {
    background-color: #f0f0f0 !important;
}

.dns-record-input {
}

.icewarp-title {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 26px;
    padding-bottom: 5px;
    padding-top: 7px;
}

div .nav-pills > li > button {
    margin-right: 7px;
    padding: 1px 13px;
    border-radius: 10px;

    font-family: 'Rubik';
    font-size: 19px;
    font-weight: 400;

    background-color: transparent;
    color: var(--dark-gray);
    border: solid 1px var(--dark-gray);
    transition: all 0.4s ease-in-out;
}

div .nav-pills > li > button:hover {
    background-color: var(--gray);
    color: var(--white-text);
    border: solid 1px var(--gray);
    transition: all 0.4s ease-in-out;
}

.nav-pills .nav-link.active {
    background-color: var(--gray);
    color: var(--white-text);
    border: solid 1px var(--gray);
    transition: all 0.4s ease-in-out;
}

.login-box {
  border-radius: 3px;
  background-color: #ffffff;
  box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12) , 0 3px 6px 0 rgba(0,0,0, 0.12);
}

.login-box-body {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 3px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: #f9f9f9;
}

.login-box-header {
    font-size: 22px;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 300;
    text-align: center;
    margin-bottom: 30px;
}

/* Classes by Luca */

.display-centered-flex,
.display-middle-flex,
div div.mfa-header-box {
    display: flex;
    align-items: center;
}

.display-flex-row-between {
    display: flex;
    justify-content: space-between;
}

.display-middle-flex {
    flex-direction: column;
    justify-content: space-evenly;
}

div div.mfa-option-box {
    width:100%;
    padding: 20px;
    margin-bottom: 20px;

    box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

div div.mfa-header-box {
    flex-wrap: wrap;
}

.enabled-icon-text {
    font-weight: bold;
    display: inline-block;
    margin: 0;
    color: var(--active-green);
    outline: solid 2px var(--active-green);
    border-radius: 10px;
    padding: 0px 13px;
}

.disabled-icon-text {
    font-weight: bold;
    display: inline-block;
    margin: 0;
    color: var(--inactive-red);
    outline: solid 2px var(--inactive-red);
    border-radius: 10px;
    padding: 0px 13px;
}

.adaptive-display-flex {
    justify-content: space-evenly;
    flex-direction: row;
}

@media (max-width: 768px) {
    .adaptive-display-flex {
        justify-content: space-evenly;
        flex-direction: column-reverse !important;
    }
}

/* Overrides and utils */

div .normalize-mfa-buttons {
    font-family: unset;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}

div .some-margin-left {
    margin-left: 20px;
}

div .some-margin-right {
    margin-right: 20px;
}

div .some-margin-bottom {
    margin-bottom: 20px;
}

div .some-margin-top {
    margin-top: 20px;
}

div .small-margin-bottom {
    margin-bottom: 10px;
}

div .small-margin-top {
    margin-top: 10px;
}

div .small-margin-left {
    margin-left: 10px;
}

div .tiny-margin-top {
    margin-top: 5px;
}

div .force-wrap {
    white-space: wrap;
}

div .no-border-bottom {
    border-bottom: 0;
}

/* main page redesign */
div.hexagons-left,
div.hexagons-right {
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    z-index: -1;
}

div.hexagons-left {
    background-size: 62% 62%;
}

div.hexagons-right {
    background-size: 90% 90%;
}

div.landing-main-wrapper {
    display:flex;
    flex-direction: row;

    width: 100%;
}

div.landing-main-box {
    width: 100%;
    height: fit-content;
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

div.landing-card {
    flex-basis: 324px;
    height: 155px;

    background-color: var(--white-fill);
    border-radius: 7px;
    margin: 1.5% 0;
    padding: 22px 27px;
    box-shadow: 0px 3px 8px 0px var(--shadow);
    position: relative;
}

h1.landing-card-titles  {
    font-family: 'Poppins';
    font-size: 27px;
    font-weight: 600;
    color: var(--text);
    display: inline;
}

img.landing-page-icon {
    width: 47px;
    height: 47px;
    float: right;
    margin-top: -7px;
}

hr.landing-page-border {
    border: 1px solid var(--border);
    margin: 8px 0 12px 0;
    width: 75%;
    margin-left: -3%;
}

div.landing-page-v-separator {
    border-left: 2px solid var(--light-separator);
    height: auto;
    margin: 0 37px 0 0px;
}

div.landing-page-h-separator {
    border-top: 2px solid var(--light-separator);
    width: auto;
    margin: 23px 0;
    width: 110%;
    margin-left: -5%;
}

a.landing-page-button {
    position: absolute;
    bottom: 10px;
    right: 28px;

    font-size: 18px;
    color: var(--gray);
}

/* main card hover */
div.landing-card:hover {
    outline: 3px solid var(--icon);
    box-shadow: none;
    cursor:pointer;
}

.blog_post_rubik_yellow {
    color: var(--beebyte-off-orange-1);
}

.blog-read-more {
    float: right;
    text-decoration: underline;
}


div.landing-card:hover hr.landing-page-border {
    border: 1px solid var(--icon);
}

img.blog_img {
    border-radius: 12px 12px 0 0;
    width: 300px;
    cursor: pointer;
}

div.blog-card-scrollable {
    max-height: 290px;
    overflow-y: scroll;
    padding: 3px;
}

div.blog-card {
    background-color: var(--white-fill);
    border-radius: 0 0 12px 12px;
    box-shadow: 0px 3px 8px 0px var(--shadow);
    padding: 5px 15px 10px 15px;
    width: 300px;
    margin-bottom: 15px;
    cursor: pointer;
}

div.blog-card-parent {
    border-radius: 12px;
}

div.blog-card-parent:hover {
    outline: 3px solid var(--beebyte-off-orange-1);
    box-shadow: none;
}

.redirect_fonts {
    text-align: end;
    display: block;
    color: var(--black-text);
    text-decoration: underline;
    margin-top: 5px;
}

div.status-div-green,
div.status-div-yellow,
div.status-div-orange,
div.status-div-red
{
    border-radius: 10px;
    outline: 2px solid;
    padding: 10px;
    margin-bottom: 15px;
    display: none;
    cursor: pointer;
    width: 300px;
}

div.status-div-green {
    outline-color: var(--active-green);
}

div.status-div-green:hover {
    background-color: var(--active-green-faded);
}

div.status-div-yellow {
    outline-color: var(--sun-yellow);
}

div.status-div-yellow:hover {
    background-color: var(--sun-yellow-faded);
}

div.status-div-orange {
    outline-color: var(--beebyte-off-orange-1);
}

div.status-div-orange:hover {
    background-color: var(--beebyte-off-orange-1-faded);
}

div.status-div-red {
    outline-color: var(--status-red);
}

div.status-div-red:hover {
    background-color: var(--status-red-faded);
}

@media (max-width: 1200px) {
    div.hexagons-right {
        background-position: 41vw 50vh;
    }
}

@media (max-width: 991px) {

    div.landing-main-box {
        margin-top: 10%;
    }

    div.landing-card {
        flex-basis: 100%;
        margin-bottom: 4%;
    }

    hr.landing-page-border{
        margin-left: 0%;
        width: 90%;
    }

    div.blog-card {
        width: 100%;
        margin-bottom: 35px;
    }

    img.blog_img {
        width: 100%;
    }

    .dissapear-mobile {
        display: none !important;
    }

    .appear-mobile-inline-block {
        display: inline-block !important;
    }

    div.landing-main-wrapper {
        flex-direction: column;
    }

    div.status-div-green,
    div.status-div-yellow,
    div.status-div-orange,
    div.status-div-red
    {
        width: 100%;
    }

    div.notificationsection-first-div  {
        flex-basis: 200px;
    }

    .no-background-image-mobile {
        background-image: none !important;
    }
}

/* public cloud redesign */

img.public_cloud_icon {
    height: 22px;
    width: 22px;
}

.no-margin {
    margin: 0;
}

.rubik_regular_16,
.blog_post_rubik_yellow {
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

div .rubik_regular_20 {
    font-family: 'Rubik';
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}

.rubik_regular_25 {
    font-family: 'Rubik';
    font-size: 25px;
    font-weight: 400;
    margin: 0;
}

.poppins_regular_20 {
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}

.active-text-icon,
.inactive-text-icon,
.other-text-icon {
    padding: 2px 12px;
    font-family: 'Rubik';
    font-size: 16px;
    font-weight: 400;
    color: var(--white-text);
    display: inline;
    border-radius: 10px;
    text-wrap: nowrap;
}

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

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

.other-text-icon {
    background-color: var(--blue);
}

div .table td {
    vertical-align: top;
    border-top: 1px solid var(--table-separator);
}

div .table thead th {
    border-bottom: 0;
}

/* setup flow redesign */

.finish-setup-flow {
    height: 23px;
    margin-bottom: 50px;
    margin-top: 10px;
    display: block;
    width: 100%;
}

/* s3 support */
.left_align_buttons {
    text-align: left;
    white-space: nowrap;
}

.right_align_buttons {
    text-align: right;
    white-space: nowrap;
}

a.btn-table-black:hover img.white-hover-img {
    filter: brightness(0) invert(1);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

a.btn-table-black img.white-hover-img {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.no-wrap {
    white-space: nowrap;
}

div h1.landing-page {
    font-family: 'Poppins';
    font-size: 32px;
    font-weight: 400;
}
/* domains redesign */

@media (min-width: 991px) {
    div table.table th.th-first-column,
    div table.table td.td-first-column {
        padding-left: 40px;
    }
}

div .table-slim {
    border: 0;
    box-shadow: 0px 2px 5px 0px var(--shadow);
    overflow-x: scroll;
}

div div .table-slim th,
div div .table-slim td {
    border: 0;
}

div div .table-slim th {
    border-bottom: 1px solid var(--black);
}

.info-box-bottom {
    background-color: #f0f0f0;
    color: #303030;
    padding: 10px 20px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    display: flex;
    justify-content: end;
    cursor: pointer;
  }

  .small-border-top {
    border-top: 1px solid var(--table-separator);
  }


/* intadmin OS updates */

.pulsating-green {
    background-color: green;
    animation-name: green-pulse-frames;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
  }

@keyframes green-pulse-frames {
    0% {
      background-color:#005500;
    }
    50% {
      background-color: rgb(0, 167, 0);
    }
    100% {
      background-color: #005500;
    }
  }

@keyframes bee-animation-lr {
    0% {
        left: -10%;
        display: block;
    }
    100% {
        left: 110%;
        display: none;
    }
}

@keyframes bee-animation-rl {
    0% {
        left: 110%;
        display: block;
    }
    100% {
        left: -10%;
    }
}

img.bee-lr {
    position: absolute;
    left: -50%;
    animation: bee-animation-lr 3s linear;
}

img.bee-rl {
    position: absolute;
    left: -50%;
    animation: bee-animation-rl 3s linear;
    transform: scaleX(-1);
}

.back_to_beebyte {
    height: 23px;
    margin-bottom: -2px;
    margin-left: 15px;
    cursor: pointer;
}


/* new messages and notifications */

.notificationsection,
.warningsection,
.errorsection {
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    background-color: var(--section-background);
    justify-content: space-between;
    margin-bottom: 1.5%;
    min-height: 4rem;
}

div.section-mid-div {
    flex-basis: 70%;
    padding: 10px;
}

div.notificationsection-first-div,
div.warningsection-first-div,
div.errorsection-first-div {
    flex-basis: 8%;
    border-radius: 10px 0 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

div.notificationsection-first-div {
    background-color: var(--notification-section);
}

div.warningsection-first-div {
    background-color: var(--warning-section);
}

div.errorsection-first-div {
    background-color: var(--msg-error);
}

div.section-last-div {
    flex-basis: 15%;

    display: flex;
    justify-content: center;
    align-items: center;
}

div.notificationsection-color-right,
div.warningsection-color-right,
div.errorsection-color-right {
    flex-basis: 1%;
    border-radius: 0 10px 10px 0;
}

div.notificationsection-color-right {
    background-color: var(--notification-section);
}

div.warningsection-color-right {
    background-color: var(--warning-section);
}

div.errorsection-color-right {
    background-color: var(--msg-error);
}

div.message-main {
    display: flex;
    flex-direction: row;
    border-radius: 7px;
    background-color: var(--section-background);
    justify-content: space-between;
    margin-bottom: 1%;

    padding: 0;
}

div.message-first-div-success,
div.message-first-div-info,
div.message-first-div-warning,
div.message-first-div-error {
    flex-basis: 5%;
    border-radius: 7px 0 0 7px;

    display: flex;
    align-items: center;
    justify-content: center;
}

div.message-first-div-success {
    background-color: var(--active-green);
}

div.message-first-div-info {
    background-color: var(--msg-info);
}

div.message-first-div-warning {
    background-color: var(--msg-warning);
}

div.message-first-div-error {
    background-color: var(--msg-error);
}

img.message-img {
    height: 30px;
}

div.message-success-color-right,
div.message-info-color-right,
div.message-warning-color-right,
div.message-error-color-right {
    flex-basis: 1%;
    border-radius: 0 7px 7px 0;
}

div.message-success-color-right {
    background-color: var(--active-green);
}

div.message-info-color-right {
    background-color: var(--msg-info);
}

div.message-warning-color-right {
    background-color: var(--msg-warning);
}

div.message-error-color-right {
    background-color: var(--msg-error);
}

div.message-midsection {
    flex-basis: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

div .full-width-mobile-50 {
    width: 50%;
}

div .full-width-mobile-75 {
    width: 75%;
}

@media (max-width: 991px) {

    div.notificationsection-first-div  {
        flex-basis: 20%;
    }

    div.message-main {
        height: 3.5rem;
    }

    div.message-first-div-success,
    div.message-first-div-info,
    div.message-first-div-warning,
    div.message-first-div-error {
        flex-basis: 10%;
    }

    div .full-width-mobile,
    div .full-width-mobile-50,
    div .full-width-mobile-75 {
        width: 100%;
    }
}

/* bank id */
div a.white-hover:hover {
    color: white;
}

div div .white-gb-color {
    background: white;
}

/* bank id domains */

div .infosection-outer-white,
div .infosection-outer-white-more-shadow {
    background-color: var(--white-fill);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 3px 7px 2px rgba(50,50,93,.1);
}

div .infosection-outer-white-more-shadow {
    box-shadow: 0 3px 11px 8px rgba(50,50,93,.1);
}

div .infosection-outer-white h1 {
    border-bottom: 1px solid var(--black-text);
    padding-bottom: 5px;
}

div input.fading-text-input {
    padding-right: 7%;
    background-image: linear-gradient(90deg, var(--form-text-color) 70%, #00000000 93%);
    color: transparent;
    background-clip: text;
    background-color: #00000000 !important;
    display: inline;
}

div img.fading-copy-button,
div img.fading-copy-button-no-click {
    z-index: 2;
    position: relative;
    top: -2px;
    right: 5%;
}

div img.fading-copy-button:hover {
    transition: filter 200ms ease-out;
    filter: invert(64%) sepia(21%) saturate(7352%) hue-rotate(358deg) brightness(105%) contrast(103%);
    cursor: pointer;
}

a.button-orange
{
    border-radius: 30px;
    outline: 2.5px solid;
    padding: 6px 11px;
    margin-bottom: 15px;
    cursor: pointer;
    outline-color: var(--beebyte-off-orange-1);
    font-weight: 600;
    color: var(--beebyte-off-orange-1);
}

a.button-orange:hover
{
    transition: background-color 200ms ease-out, color 200ms ease-out;
    background-color: var(--beebyte-off-orange-1);
    color: white;
    text-decoration: none;
}
/* contact cards */

div.cc-conn-form input[type=checkbox] {
    width: 15px;
    height: inherit;
    display: inline;
}

div.cc-conn-form label {
    margin-bottom: 0px;
}

div.cc-conn-form .form-control {
    height: inherit;
}

div.cc-conn-form ul.form-control {
    max-height: 250px;
    overflow-y: scroll;
    list-style-type: none;
}

div .faded-color {
    color: var(--faded-text);
}

div.cc-add input[type=checkbox] {
    width: 15px;
    height: 15px;
    display: inline;
    margin: 0 0 0 5px;
}

div a.clickable-orange-headers {
    text-decoration: none;
    font-family: 'Rubik';
    font-size: 22px;
    font-weight: 400;
    color: var(--beebyte-off-orange-1);
}

div a.clickable-orange-headers:hover {
    text-decoration: underline;
}

div td.small-img img {
    height: 15px;
}

.hidden-hover-info {
    display: none;
}

.display-hidden-hover-info:hover + .hidden-hover-info {
    display: block;
    position: absolute;
    background-color: var(--section-background);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 3px 8px 0px var(--shadow);
    z-index: 1;
    width: 50%;
}

div .margin-left-auto-mobile {
    margin-left: auto;
}

div .flex-mobile {
    display: flex;
    flex-direction: row;
}

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

div div.new_choice_card {
    background: var(--white-fill);
    border: 2px solid var(--light-separator);
    border-radius: 5px;
    transition: all 0.2s ease-in-out;

    flex: 0.9;
    margin: 0 6%;
    height: 25vh;
    padding: 5px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

div div.new_choice_card_selected {
    border: 2px solid var(--beebyte-off-orange-1) !important;
    transition: all 0.2s ease-in-out;
}

div div.new_choice_card_selected > .btn-submit{
    background-color: var(--beebyte-off-orange-1);
}

@media (max-width: 991px) {
    div .flex-mobile {
        flex-direction: column;
    }

    div .margin-left-auto-mobile {
        margin-left: 0;
    }

    div div.new_choice_card {
        flex: none;
        margin: 2% 0;
    }

    div .full-width-mobile {
        width: 100%;
    }
}


/* plesk cpu and ram */
div .turn-to-beebyte-color {
    filter: hue-rotate(195deg) saturate(350%);
}

div .turn-to-bw {
    filter: saturate(0);
}

div ul.pagination .page-item.active .page-link {
    background-color: var(--gray);
    border-color: var(--dark-gray);
}

div ul.pagination .page-link {
    color: var(--gray);
}

div .dataTables_filter {
    float: inline-end;
}

/* graphs */
.graph-div,
.graph-div-left,
.graph-div-right {
    width: 115%;
    height:300px;
}

.graph-div-left {
    margin-left: -5%;
}

.graph-div-right {
    margin-right: -5%;
}

.graph-text-placeholder {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20%;

    font-size: 18px;
}

.div-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0;
    z-index: 10;
    padding: 0% 25% 0% 3%;
}

/* Reseller economics */
div.form-group input[type=radio] {
    width: 20px;
    height: 20px;
    display: inline;
}

.margin-left-7 {
    margin-left: 7px;
}

div div.collapsible-box-header {
    width: 100%;
    padding: 15px;
    border-radius: 3px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: #ffffff;
    box-shadow: 0 0 5px 1px rgba(60, 66, 87, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.12);

    cursor: pointer;
}

div .collapsible-box-body {
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgba(60, 66, 87, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.12);
}