@font-face {
  font-family: 'HelveticaNeue';
  src: url('HelveticaNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
}

body {
    font-family: 'HelveticaNeue', "Open Sans", sans-serif;
}

.footer {
    background-color: #0C0C12;
}

.footer .footer-logo {
    max-width: 100%;
    padding: 5px;
}

.footer .footer-heading{
    color: #fff;
    font-size: 16px;
    text-transform:uppercase;
    font-weight:600;
}

.footer .footer-description {
    color: #63697A;
    font-size: 14px;
    font-weight:400;
    line-height: 24px;
    max-width: 305px;
}

.footer .footer-links{
   list-style: none;
   padding: 0;
}

.footer .footer-link{
    color: #63697A;
    font-size: 14px;
    font-weight:400;
    text-decoration:none;
}
.footer .footer-link:hover{
    color: #fff;
    text-decoration:none;
}
.footer .social-icons {
    list-style:none;
}

.footer .social-icons li {
    display: inline-block;
    margin-right: 10px;
}

.footer .copyright {
    color: #A3A7B6;
}


.btn-primary-custom {
    background-color: #0C0C12;
    color: #fff;
}
.btn-primary-custom:hover {
    background-color: #0C0C12;
    color: #fff;
    opacity: 0.8;
}


.btn-primary-custom:disabled, .btn-primary-custom.disabled {
    background-color:rgba(222, 229, 237, 0.5);
    color: rgba(158, 163, 183, 1);
    opacity: 0.5;
    cursor: not-allowed;
    border: none;
}

.color-texture{
    color:#666D85;
}

.btn-email-open-custom {
    background-color: transparent;
    border: none;
    color: rgba(12, 12, 18, 1);
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
}
.header.header .logo-img {
    max-height: 96px;
}

/* Slide Out Menu */

.burger-menu-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--secondary-color);
    margin-right: 15px;
}


.slide-out-menu {
    position: fixed;
    top: 0;
    left: -500px;
    width: 500px;
    height: 100%;
    background-color: var(--white);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    transition: left 0.3s ease;
    overflow-y: auto;
}
.form-control::placeholder {
    color:#9EA3B7;
}

@media  (max-width: 768px) {
    .slide-out-menu {
        width: 100%;
        left: -100%;
    }
    .navbar {
        padding: 0.5rem 0;
    }
    
}


.slide-out-menu.open {
    left: 0;
}

.menu-header {
    padding: 20px;
    background-color: var(--primary-color);
    color: #1D263A;
    display: flex;
    line-height: 32px;
    justify-content: space-between;
    align-items: center;
}

.close-menu {
    background: none;
    border: none;
    color: #1D263A;
    font-size: 24px;
    cursor: pointer;
}

.slide-out-nav {
    list-style: none;
    padding: 20px 0;
}

.slide-out-nav li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}
/* 
.slide-out-nav li a:hover {
    background-color: #f5f5f5;
} */

.slide-out-nav li a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.overlay.active {
    opacity: var(--overlay-opacity);
    visibility: visible;
}


.dropdown-container {
  display: none;
  padding-left: 20px;
  list-style: none;
}


/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.flex-1 {
    flex: 1;
}
.flex-\[1\.5\] {
    flex: 1.5;
}

.color-service {
    color: #73349E;
}
.color-domain {
    color:#E67064;
}

.color-invoice {
    color: #51A2B6;
}

.color-ticket {
    color: #265794;
}


.tiles .tile {
    padding: 16px 20px;
    border: 1px solid #DEE5ED;
}

.master-breadcrumb .breadcrumb {
    padding: 20px 0;
}

.card-header:first-child {
    background-color: #0C0C12;
        color: white;
}
.sidebar .list-group-item {
    color: #666D85;
}

.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover {
    background-color: transparent;
    color: #0C0C12;
    font-weight: 600;
    border-color: #f5f5f5;
}
.card-body label {
    color: #666D85;
}

.card .form-check-input {
    background: transparent;
    background-color: transparent;
    color: black;
    accent-color: transparent;

}

.domain-details-box {
    border: 1px solid #DEE5ED;
    padding: 24px;
}
.domain-details-box .domain-box-label {
    color: #1D263A;
    font-size: 16px;
    font-weight: 500;
}
.domain-details-box .value {
    color :#666D85;
    font-weight: 400;
}

.doToday {
    color :#1D263A;
    font-weight: 400;
    line-height: 34px;
    font-size: 24px;
}

.tabLinkstyle {
    color: #0C0C12;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    padding: 5px 0;
    line-height: 24px;
}

.tabLinkstyle:hover {
    color: #0C0C12;
    text-decoration: none;
}

.btn-primary-custom {
    background-color: #0C0C12;
    padding:15px 30px;
}

.btn-default-custom {
    padding:15px 30px;
}

.table-striped tbody tr {
    background-color: #F9FAFB !important;
}
.table-striped tbody tr th {
    color: #1D263A;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.new-user-invite-card  .card-title{
    color: #1D263A;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    font-style: normal;

}

.inviteemail {
    height: 58px;
    border-radius: 1px;
}
.inviteemail::placeholder{
    color: #666D85;
    font-size: 14px;
}

.btn-send-invite {
    background-color: rgba(222, 229, 237, 0.5);
    color:rgba(158, 163, 183, 1);
    padding: 15px;
    border: none;
}
.btn-send-invite:hover{
        background-color: rgba(12, 12, 18, 1);
}

.btn-manage-permissions {
    background-color: rgba(222, 229, 237, 1);
    padding: 15px;
    border: none;
}
.btn-remove-user {
    background-color: rgba(222, 229, 237, 0.5);
    color:rgba(158, 163, 183, 1);
    padding: 15px;
    border: none;
}
.btn-resend, .btn-cancel-invite {
    background-color: rgba(222, 229, 237, 0.5);
    color:rgba(158, 163, 183, 1);
    padding: 10px 15px;
    border: none;
    
}
.btn-resend:hover, .btn-cancel-invite:hover{
        background-color: rgba(12, 12, 18, 1);
        color: #fff;
}

.select-contact {
    background-color: #EFF0F6 !important;
    padding: 40px;
}
.select-contact .custom-select {
    height: 48px;
    color: #666D85;
    font-size: 14px;
}

.btn-add {
    color: rgba(158, 163, 183, 1);
    background-color: rgba(222, 229, 237, 0.5);
    padding: 11px;
}

.btn-add:hover {
    background-color: rgba(12, 12, 18, 1);
    color: #fff;
}
.new-contact-form input, .new-contact-form select {
    height: 48px;
}
.new-contact-form input::placeholder {
    color: rgba(102, 109, 133, 1);
    font-size: 14px;
}

.homepage-card{
    min-height: 370px;
}

.homepage-card:hover {
   
    transform: translateY(-5px);
    transition: all 0.3s ease;
    background: url("../images/homepage-cart-gradient.png");
    background-position: center;
    background-size: cover;

}

.homepage-card .card-body{
    height: 370px;
    padding: 20px !important;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.btn-outline-primary-custom {
    color: #0C0C12;
    border-color: #0C0C12;
    background-color: #fff;
    padding: 10px 20px;
}
.alert-info {
    background: transparent;
    border: none;
    color: #666D85;
}

.btn-success,  .btn-success:active, .btn-success:focus, .btn-success:hover {
    background-color: #0C0C12;
    border: none;
    box-shadow: none;
    border:none;
}
.div-service-status .label-success,.div-service-status .label-success:hover {
    background-color: #51A2B6;
}
.client-home-cards .card-header .btn.bg-color-blue{
    background-color: #265794;
    color: white;
}
.client-home-cards .card-header .btn.bg-color-blue:hover{
    color: #0C0C12;
    background-color: white;
}
.btn-danger-custom  {
    padding: 15px 30px;
}

#order-premium_comparison .main-container.price-01 h3, #order-premium_comparison .main-container.price-01 h5{
    color: #1D263A;
    font-weight: bold;
    font-size: 32px;
}