:root {
    --tagify-dd-color-primary: #d2d6da;
    --tag-bg: #fff !important;
}

.modal {
    z-index: 9999;
}

html {
    margin-left: calc(100vw - 100%);
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.form-control {
    font-size: 16px;
}

.multisteps-form__progress-btn {
    text-indent: 1px !important;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-size: 16px;
}

.twofa-input-row {
    max-width: 400px;
}

aside#sidenavDashboard {
    z-index: 99;
}

.navbar-dashboard {
    z-index: 98;
}

h6.site-card-heading {
    font-size: 14px;
}

.scroll-container-dashboard {
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.site-img-wrapper {
    position: relative;
}

.site-img-url {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

aside#sidenavDashboard {
    z-index: 1021 !important;
}


/* Inline Table Form */

.form-control.form-field-inline-edit {
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 0p 4px 0px;
    background-color: transparent;
    line-height: 1rem;
}

.form-control.form-field-inline-edit-disabled,
.form-control.form-field-inline-edit-disabled:hover {
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 0p 4px 0px;
    background-color: transparent;
    line-height: 1rem;
}

.form-control.form-field-inline-edit-active {
    border: none;
    border-bottom: 1px dotted;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 0p 4px 0px;
    line-height: 1rem;
    border-radius: 0px !important;
}

.form-control.form-field-inline-edit:hover {
    border-bottom: 1px dotted;
    font-size: 0.85rem;
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1rem;
    border-radius: 0px !important;
}

.form-control:focus.form-field-inline-edit:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px dotted;
    font-size: 0.85rem;
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1rem;
    border-radius: 0px !important;
}

.btn-submit-inline-edit {
    padding: 7px !important;
}

.form-bundle-inline-edit {
    width: 100%;
    min-width: 260px;
}

#repeatLabelsSiteCards {
    white-space: nowrap;
}

.row-site-cards-labels {
    overflow: scroll;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}


/*Tagify*/

.tagify__dropdown__wrapper {
    border-color: #b7b7b7;
    -webkit-box-shadow: 0 8px 26px -4px hsl(0deg 0% 8% / 15%), 0 8px 9px -5px hsl(0deg 0% 8% / 6%);
    box-shadow: 0 8px 26px -4px hsl(0deg 0% 8% / 15%), 0 8px 9px -5px hsl(0deg 0% 8% / 6%);
    border-radius: 0.5rem;
    background-color: #fff;
}

.tagify__dropdown__item:hover {
    background-color: #e9ecef;
    color: #000;
}


/*Bundles*/

.scroll-bundle-details-container {
    min-width: 600px;
}


/*Toasts*/

.toast.fade.show {
    margin-bottom: 10px;
}

.toast {
    background-color: #fff !important;
}

.toast-header {
    color: var(--bs-gray-dark);
}

.toast small.text-muted {
    color: var(--bs-gray-dark) !important;
}

.toast-body {
    color: var(--bs-gray-dark);
}

.toast strong.me-auto {
    color: var(--bs-gray-dark);
}

.style1 {
    text-transform: uppercase;
    font-style: italic;
    color: #000;
}


/*Sidebar*/

aside#sidenav-main {
    z-index: 1000;
}


/*navbar*/

.navbar .z-index-sticky {
    z-index: 900;
}

.gradient-border {
    --borderWidth: 20px;
}


/*Pagination*/

.page-item.active .page-link {
    background-color: transparent !important;
}


/*Animations*/


/*Gradient Border*/

.gradient-border {
    --borderWidth: 10px;
    background: #1d1f20;
    position: relative;
    border-radius: var(--borderWidth);
}

.gradient-border:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 23);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient( 60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    -webkit-animation: animatedgradient 3s ease alternate infinite;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

@-webkit-keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.breadcrumb-heading {
    text-transform: uppercase;
}

.nav-profile-image {
    max-width: 50px;
    max-height: 50px;
}

.input-show-ssh-key {
    min-height: 200px;
    height: 200px;
}

.logo {}

.sidenav-header {
    position: relative;
}

.sidenav-header .navbar-brand-img {
    margin-right: 10px;
    /* Adjust the margin as needed */
}

.sidenav-header .font-weight-bold {
    position: absolute;
    bottom: 0;
    left: calc(70px);
    /* Adjust the value as needed */
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.style2 {
    background-image: url("../assets/images/welcome.png");
    background-size: cover;
}

div.card-body.text-center {}

.style3 {
    background-position: center;
}

.welcomecard {
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 15px;
    background-image: url("../assets/images/welcome-mobile.png");
    background-size: cover;
}

.welcomeapp {
    background-image: url("../assets/images/welcome-mobile.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: local;
}

.welcome {
    background-image: url("../assets/images/welcome-mobile.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #a82d2d;
}

.style4 {
    background-image: url("../assets/images/welcome-mobile.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}


/*Animations*/

.pulse {
    -webkit-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

body.dark-version .modal {
    --bs-modal-bg: transparent;
}


/*Tagify*/

.tagify.form-control {
    min-height: 40.59px;
}

.night-switch {
    min-width: 120px;
}

.integration-logo {
    max-width: 40px;
    max-height: 40px;
    min-height: 40px;
}

.email-integration-logo-column {
    min-width: 4px;
}

.style5 {
    position: sticky;
}


/* navv Pills */

.nav-pills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .nav-pills {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}


/*Responsive Sidenav Logo */

#navLogoSmall {
    min-width: 45px;
    min-height: 45px;
}

body.g-sidenav-hidden #navLogoWide,
body.g-sidenav-hidden #navLogoWideBrand {
    display: none;
}

body:not(.g-sidenav-hidden) #navLogoSmall,
body:not(.g-sidenav-hidden) #navLogoSmallBrand {
    display: none;
}

body.g-sidenav-hidden #navLogoSmall,
body.g-sidenav-hidden #navLogoSmallbrand {
    display: block;
}

body.g-sidenav-hidden #sidenav-main:hover #navLogoSmall,
body.g-sidenav-hidden #sidenav-main:hover #navLogoSmallBrand {
    display: none;
}

body.g-sidenav-hidden #sidenav-main:hover #navLogoWide,
body.g-sidenav-hidden #sidenav-main:hover #navLogoWideBrand {
    display: block;
}

.navbar-vertical.bg-white .navbar-nav>.nav-item>.nav-link:hover {
    background-color: #f6f9fc;
    border-radius: 0.5rem;
}

.dark-version .navbar-nav>.nav-item>.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 0.5rem;
}


/*Site Cards*/

.card-header-image {
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
    max-width: 350px;
}


/*Slider Site Creation*/

.custom-slider {
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: transparent;
    outline: none;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #67748e;
    cursor: pointer;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    margin-top: -8px;
}

.custom-slider::-moz-range-thumb {
    width: 30px;
    height: 5px;
    border-radius: 50%;
    background-color: #035a2d;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.custom-slider::-ms-thumb {
    width: 30px;
    height: 5px;
    border-radius: 50%;
    background-color: #035a2d;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    margin-top: 0;
}

.custom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: -webkit-gradient(linear, left top, right top, from(#2dce89), color-stop(#2dcecc), color-stop(transparent), to(transparent));
    background: linear-gradient(to right, #2dce89 0%, #2dcecc var(--value), transparent var(--value), transparent 100%);
}

.custom-slider::-moz-range-progress {
    background-color: #035a2d;
}

.custom-slider::-ms-fill-lower {
    background-color: #035a2d;
}

input#createsitespaceslider {
    border: none;
    padding: 0;
    background-color: #67748e;
}

input#createsitesworkerslider {
    border: none;
    padding: 0;
    background-color: #67748e;
}

/*permissons*/

.role_tag_easy {
    --tag-bg: var(--bs-success);
    --tag-text-color: #fff;
}

.role_tag_default {
    --tag-bg: var(--bs-secondary);
    --tag-text-color: #fff;
}

.role_tag_danger {
    --tag-bg: var(--bs-danger);
    --tag-text-color: #fff;
}

.role_tag_warning {
    --tag-bg: var(--bs-warning);
    --tag-text-color: #fff;
}

.create_company_ssh_keys,
.edit_company_ssh_keys {
    --tag-bg: var(--bs-warning);
    --tag-text-color: #fff;
}


/*Death*/

.role_tag_extra_careful
{
    --tag-bg: var(--bs-gray-900);
    --tag-text-color: #fff;
    --tag-remove-btn-color: #fff;
}

.role_tag_extra_careful::before {
    content: "\2620\fe0f";
    padding-left: 5px;
}

.role-permission-flex {
    overflow: scroll;
    max-width: 90vw;
}

.tagify__tag-text {
    display: inline-block;
    vertical-align: middle;
}

.role_tag_extra_careful:hover,
.role_tag_easy:hover,
.role_tag_warning:hover,
.role_tag_danger:hover,
.role-permission-flex:hover {
    --tag-text-color: #000;
    --tag-bg-color: #c77777;
    --tag-hover: #c77777;
}


/*Tagify*/

.tagify--focus {
    --tags-focus-border-color: #1b453b;
}


/*Cards Dark Mode*/

.dark-version .card .card-header-image {
    position: relative;
}

.dark-version .card .card-header-image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000059;
    z-index: 1;
    border-top-right-radius: 0.8rem;
    border-top-left-radius: 0.8rem;
}


/*Dark Mode Inputs*/

input.dark-version {
    border-color: #4b4b4b;
}


/*Fontawesome Override*/

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    font-family: "Font Awesome 6 Pro"!important;
}

/*Domain Table*/

.row-ssl-domain-table {
    min-width: 170px;
}

/*Alerts*/
.alert {
    z-index: 3000;
}

/*Main Side Nav*/

.collapse-nav-item-active {
    background-color: #f6f9fc;
    border-radius: 0.5rem
}

/*Bootbox Confirmation*/
.modal-dialog .modal-header {
    border-bottom: none;
}

.modal-dialog .modal-footer {
    border-top: none;
}

.style6 {
    display: block;
}