.pt-3 {
    padding-top: 1rem !important;
}
.pr-6 {
    padding-right: 39px;
}

.text-dark {
    text-align: center;
}

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

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

#order_summery_block {
    height: 100%;
}

.service_box_outer, .panel_box_outer, .domain_name_options_box_outer {
    overflow: hidden;
}

/*-----------------------------------------------------------------------------------*/
/* 	description-left
/*-----------------------------------------------------------------------------------*/
.icon-hover-container-left {
    position: relative;
    display: inline-block;
    font-size: 14px; /* Pas de grootte van het icoon aan hier */
    color: #333;
}

.hover-description-left {
    position: absolute;
    top: 50%;
    width: 320px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.icon-hover-container-left:hover .hover-description-left {
    opacity: 1;
    visibility: visible;
}
/*-----------------------------------------------------------------------------------*/
/* 	description-center
/*-----------------------------------------------------------------------------------*/
.icon-hover-container-center {
    position: relative;
    display: inline-block;
    font-size: 14px; /* Pas de grootte van het icoon aan hier */
    color: #333;
}

.hover-description-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -0%);
    width: 320px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.icon-hover-container-center:hover .hover-description-center {
    opacity: 1;
    visibility: visible;
}
/*-----------------------------------------------------------------------------------*/
/* 	description-right
/*-----------------------------------------------------------------------------------*/
.icon-hover-container-right {
    position: relative;
    display: inline-block;
    font-size: 14px; /* Pas de grootte van het icoon aan hier */
    color: #333;
}

.hover-description-right {
    position: absolute;
    top: 50%;
    right: 0%;
    /* transform: translate(-50%, -50%); */
    width: 320px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.icon-hover-container-right:hover .hover-description-right {
    opacity: 1;
    visibility: visible;
}