@charset "utf-8";
/* CSS Document */

body{
    background: #e9edf6;
    color: #27283c;
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: bold;
}
h1, .x-large{
    font-size: x-large;
    font-weight: bold;
    display: block;
}
h2, .large{
    font-size: large;
    font-weight: bold;
    display: block;
}
@media (min-width: 1400px){
    .container {
        max-width: 1320px;
    }
}
a{
    transition: .2s;
    color: #097ffa;
}
a:hover{
    text-decoration: none;
    color: #0033bf;
}
.cursor-pointer {
    cursor: pointer;
}
.bg-gray-light {
    background-color: #F4F6FA !important;
}
.bg-gray {
    background-color: #e9edf6 !important;
}
img{
    max-width: 100%;
}
div[style="margin:0 0 10px 0;padding:10px 35px;background-color:#ffffd2;color:#555;font-size:16px;text-align:center;"]{
    display: none;
}
.text-small{
    font-size:small;
}
.form-label-group input, .form-label-group label {
    padding: 25px 15px;
    margin-bottom: 10px;
}
.form-label-group label {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    text-align: left;
    font-weight: normal;
    margin-bottom: 0;
    line-height: 1.5;
    color: #777;
    pointer-events: none;
    cursor: text;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: all .1s ease-in-out;
}
.form-label-group input:not(:placeholder-shown) {
    padding-top: 32px;
    padding-bottom: 18px;
}
.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: 8px;
    font-size: 12px;
    color: #999;
    display: block;
    margin-left: 15px;
}
.form-label-group .iti ~ label {
    padding-top: 8px;
    font-size: 12px;
    color: #999;
    display: block;
    margin-left: 75px;
}
.form-label-group select{
    height: 52px;
    padding-left: 15px;
}
.skeleton{
    background: #e9edf6;
    width: 100%;
    border-radius: 6px;
    height: 20px;
    margin-bottom: 10px;
    animation: pulse 1s ease-in-out infinite;
}
/*
.skeleton:last-child {
    margin-bottom: 0;
}
*/
.skeleton.skeleton-third{
    width: 33%;
}
.skeleton.skeleton-half{
    width: 50%;
}
.skeleton.skeleton-dark{
    background: #cfd7ea;
    animation: pulse-dark 1s ease-in-out infinite;
}
.skeleton-section{
    margin-bottom: 40px;
}
.grid-skeleton{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    margin-bottom: 30px;
}
.grid-skeleton .thumbnail{
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #e9edf6;
    height: 225px;
    width: 100%;
}
.grid-skeleton .infos{
    padding: 20px;
    background: white;
    border-radius: 0 0 12px 12px;
}
.list-skeleton{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 20px;
    margin-bottom: 10px;
    line-height: 38px;
}
.list-skeleton .skeleton{
    margin-bottom: 0;
}
.app-skeleton{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 30px;
    margin-bottom: 20px;
    line-height: 38px;
}
.table-skeleton{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 30px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}
.table-skeleton .row:last-child .skeleton{
    margin-bottom: 0;
}
.table .skeleton{
    margin: 0;
}
.skeleton-line{
    width: 100%;
    height: 1px;
    animation: pulse 1s ease-in-out infinite;
    margin-bottom: 10px;
}
@keyframes pulse {
    0% {
        background: #e9edf6;
    }
    50% {
        background: #e9edf650;
    }
    100% {
        background: #e9edf6;
    }
}
@keyframes pulse-dark {
    0% {
        background: #cfd7ea;
    }
    50% {
        background: #cfd7ea90;
    }
    100% {
        background: #cfd7ea;
    }
}
.popover{
    text-align: center;
}
.popover ul{
    padding-left: 10px;
    margin-bottom: 0;
    list-style: none;
}
.popover ul li:not(:last-child){
    padding-bottom: 10px;
}
.popover small{
    font-size: 13px;
}
.fa-info-circle{
    font-size: small;
    color: #8a8ca2;
}
hr.noline{
    margin-top: 2rem;
    border-top: none;
}
.sort-header, .hover-pointer {
    cursor: pointer;
}
.sort{
    color: #8a8ca2;
    font-size: small;
}
thead td:hover .sort{
    color: #097ffa;
}
.btn-default{
    color: #343a40;
    border-color: #babfc3;
    box-shadow: 0 1px 0 rgb(0 0 0 / 5%);
}
.btn-default:hover{
    background: #eee;
}
.btn-facebook{
    background: #4267B2;
    color: white;
}
.btn-twitter{
    background: #1DA1F2;
    color: white;
}
.btn-linkedin{
    background: #0072b1;
    color: white;
}
/*.btn-group>.btn:not(:first-child) {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}*/

.bg-gray {
    background-color: #F4F6FA !important;
}
.account-pin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 90px;
}
.wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
#admin-as-client{
    background: #c32126;
    position: fixed;
    top: 0;
    left: 250px;
    width: calc(100% - 250px);
    z-index: 99;
    text-align: center;
    font-size: small;
    padding: 4px 0;
    color: white;
    display: none;
}
#admin-as-client a{
    font-weight: bold;
    color: #ffffff;
    text-decoration: underline;
}
#admin-as-client a:hover{
    text-decoration: none;
}
body.admin #admin-as-client{
    display: block;
}
body.admin .wrapper{
    margin-top: 27px;
}
.mobile{
    display: none;
}
.tooltip-inner {
    max-width: 275px;
}
.tool-tip {
    display: inline-block;
}
.tool-tip [disabled] {
    pointer-events: none;
}
.badge-outline-danger{
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
}
.badge-outline-success{
    border: 1px solid #28a745;
    background: transparent;
    color: #28a745;
}
.badge-outline-secondary{
    border: 1px solid #6C757D;
    background: transparent;
    color: #6C757D;
}
.dropdown-menu{
    border-radius: 12px;
    box-shadow: rgb(0 0 0 / 30%) -15px 15px 35px 0px;
    border-color: white;
    top: 2px !important;
    padding: 10px 20px;
}
.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header{
    padding: 0 10px;
    line-height: 32px;
}
.dropdown-menu .dropdown-header{
    color: rgb(138, 140, 162);
    text-transform: uppercase;
    font-size: x-small;
}
.dropdown-menu .dropdown-item.current{
    font-weight: bold;
}
.dropdown-menu .dropdown-item:hover{
    background: rgb(233, 237, 246);
    border-radius: 6px;
}
.modal-md{
    max-width: 600px;
}
.modal-content{
    border-radius: 12px;
    box-shadow: 0 15px 35px 0 rgb(0 0 0 / 30%);
    border: none;
}
.modal-header{
    border-bottom: none;
    padding: 2rem 2rem 1.5rem 2rem;
}
.modal-header .icon{
    color: #c32126;
    margin-right: 5px;
}
.modal-body{
    padding: 0 2rem;
}
.modal-footer{
    border-top: none;
    padding: 1rem 2rem 2rem 2rem;
}
.modal h6{
    font-size: large;
}
.form-control[readonly] {
    background-color: #e9edf6;
    border: none;
}
.multiselect {
    width: 100%;
}
.multiselect .custom-select {
    position: relative;
}
.multiselect .multiselect-menu {
    display: none;
    border: 1px #dadada solid;
    position: absolute;
    z-index: 5;
    background-color: #fff;
    box-shadow: -15px 15px 35px 0 rgb(0 0 0 / 30%);
    padding: 10px;
    border-radius: 12px;
}
.multiselect .multiselect-menu label {
    display: block;
    padding: 5px 10px;
    border-radius: 6px;
    margin: 0;
    line-height: 1.5;
}
.multiselect .multiselect-menu label:hover {
    background: #e9edf6;
}
.multiselect .multiselect-menu label .content {
    font-size: 1rem;
    font-weight: 400;
    padding: 0 5px;
}
#sidebar{
    width: 250px;
    z-index: 1002;
    background: #27283c;
    bottom: 0;
    position: fixed;
    transition: all .2s ease-out;
    top: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    color: #8a8ca2;
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#sidebar a{
    color: white;
}
#sidebar ul{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    white-space: nowrap;
}
#sidebar .fa-chevron-down{
    margin-left: 10px;
    font-size: small;
}
/*
#sidebar a[aria-expanded="false"] .fa-chevron-down {
    display: none;
}
#sidebar a[aria-expanded="false"]:hover .fa-chevron-down {
    display: inline-block;
}
*/
#sidebar a[aria-expanded="true"] .fa-chevron-down:before {
    content: '\f077';
}
#sidebar li a{
    display: block;
    padding: 12px 30px;
    position: relative;
}
#sidebar li a:hover, #sidebar li a.active{
    text-decoration: none;
    background: #33354F;
}
#sidebar li a.active{
    border-right: 4px solid #097ffa;
}
#sidebar ul i{
    margin-right: 15px;
    color: #8a8ca2;
    font-size: large;
}
#sidebar ul li ul{
    padding: 0 0 0 30px;
    font-size: 14px;
    opacity: 0;
    transition: .2s;
}
#sidebar ul li ul.show{
    padding: 0 0 15px 30px;
    opacity: 1;
}
#sidebar ul li ul li{
    margin-left: 8px;
}
#sidebar ul li ul li a {
    padding: 4px 0 4px 24px;
    color: #8a8ca2;
    border-left: 2px solid #8a8ca2;
}
#sidebar ul li ul li a:hover, #sidebar ul li ul li a.active{
    border-left-color: #097ffa;
    border-right: 0;
    color: white;
    background: #33354F;
}
#sidebar ul li ul li .badge{
    margin-left: 4px;
}
#sidebar ul li.billing .badge, #sidebar ul li.support .badge{
    transform: scale(0.75);
}
#sidebar ul li .bi-circle-fill{
    font-size: xx-small;
    margin-left: 5px;
}
#sidebar #logo, #sidebar img{
    width: 160px;
    margin: 20px auto;
    display: block;
}
#sidebar #logo-mobile{
    display: none;
}
#sidebar #secondary-menu{
    position: absolute;
    bottom: 20px;
    width: 100%;
}
#sidebar .badge-secondary{
    background: #33354f;
    float: right;
    color: #8a8ca2;
    margin-top: 5px;
}
#sidebar li a.active .badge-secondary, #sidebar li a:hover .badge-secondary{
    background: #27283c;
}

/**** ALERTS ****/
.alert{
    /*    box-shadow: 0 0 35px 0 rgb(154 161 171 / 30%);*/
    border-radius: 12px;
    padding: 20px 20px 20px 50px;
    color: #27283c;
}
.alert .close{
    color: inherit;
}
.alert a{
    color: inherit;
    text-decoration: underline;
}
.alert a:hover{
    cursor: pointer;
}
.alert-success{
    /*    border: 1px solid #28a745;*/
    border-left: 8px solid #28a745;
}
.alert-info{
    /*    border: 1px solid #17a2b8;*/
    border-left: 8px solid #17a2b8;
}
.alert-warning{
    /*    border: 1px solid #ffc107;*/
    border-left: 8px solid #ffc107;
}
.alert-danger{
    /*    border: 1px solid #dc3545;*/
    border-left: 6px solid #dc3545;
}
.alert.alert-icon-none {
    padding-left: 20px;
}
.alert:before{
    font-family: "Font Awesome 6 Pro";
    font-weight: bold;
    letter-spacing: normal;
    font-size: large;
    position: absolute;
    left: 20px;
    margin-top: -1px;
}
.alert-no-icon {
    padding: 20px 20px 20px 20px;
}
.alert-no-icon:before {
    content: none !important;
}
.alert-success:before{
    content: '\f058';
    color: #28a745;
}
.alert-success.alert-success-ver-user:before {
    content: '\f2f7';
    color: #28a745;
}
.alert-info:before{
    content: '\f05a';
    color: #17a2b8;
}
.alert-warning:before{
    content: '\f071';
    color: #ffc107;
}
.alert-lock:before{
    content: '\f023';
}
.alert-danger:before{
    content: '\f06a';
    color: #dc3545;
}
.alert-danger.alert-danger-ver-user:before {
    content: '\e4e8';
    color: #dc3545;
}
.alert.alert-icon-none:before {
    content: none !important;
}
.alert .btn{
    color: white;
    text-decoration: none;
    margin-top: -6px;
}
.alert-clickable{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.alert-clickable .btn{
    margin-top: 0;
    margin-left: 20px;
}
#content{
    margin-left: 250px;
    overflow: hidden;
    padding: 5px 20px 10px;
    /*	min-height: 80vh;*/
    min-height: 100vh;
}
.navbar{
    padding: 0 30px;
    background-color: #fff;
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    margin: -5px -20px 0;
    min-height: 70px;
    position: fixed;
    width: calc(100% - 250px);
    z-index: 1001;
}
.navbar .mobile-only, .navbar .menu-mobile{
    display: none;
}
.navbar .currentPage{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: x-large;
    font-weight: bold;
}
.navbar ul{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.navbar ul li{
    display: inline-block;
    margin-left: 20px;
}
.navbar ul li:first-child{
    margin-left: 0;
}
.navbar ul a{
    color: #33354f;
}
.navbar ul a:hover, .navbar a:hover i{
    text-decoration: none;
    color: #097ffa;
}
.navbar i{
    font-size: x-large;
    color: #8a8ca2;
    transition: .2s;
}
.navbar .profile-picture {
    height: 35px;
    border-radius: 50%;
    margin: -3px 5px 3px 0;
}
.navbar i.fa-user-circle{
    margin-right: 5px;
    font-size: 35px;
    vertical-align: middle;
}
.navbar i.fa-chevron-down{
    font-size: small;
    margin-left: 5px;
}
.navbar .user > a {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background-color: #097ffa;
}
.navbar .user > a:hover {
    color: #fff;
    background-color: #0069D9;
}
.navbar .user > a > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
}
.navbar .user a[aria-expanded="true"] i{
    color: #097ffa;
}
.navbar .user a[aria-expanded="true"] i:before{
    content: '\f077';
}
.navbar #search-bar input{
    border-radius: 38px;
    border: none;
    background: #e9edf6;
    padding-left: 40px;
    padding-right: 20px;
    font-size: small;
    width: 300px;
    max-width: 100%;
}
.navbar #NCA {
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color: #8a8ca2;
    font-size: large;
    font-weight: 500;
}
.navbar #NCA .badge {
    font-size: x-small;
    position: relative;
    top: -2px;
}
.alert.snackbar {
    visibility: hidden;
    position: fixed;
    z-index: 99;
    background: white;
    display: flex;
    align-items: flex-start;
    max-width: 500px;
    top: 85px;
    right: 35px;
    box-shadow: 0 15px 35px 0 rgb(0 0 0 / 30%);
}
.admin .alert.snackbar {
    top: 105px;
}
.alert.snackbar.show{
    visibility: visible;
    animation: fadein 0.5s ease-in-out, fadeout 0.5s 5s ease-in-out;
}
.alert.snackbar.show:hover{
    animation: fadein 0.5s ease-in-out;
}
.alert.snackbar.show.stay{
    visibility: visible;
    animation: fadein 0.5s ease-in-out;
}
.alert.snackbar.show.stay #closeSnackbar{
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 28px;
}
@keyframes fadein {
    from {right: -500px; opacity: 0;}
    to {right: 30px; opacity: 1;}
}
@keyframes fadeout {
    from {right: 30px; opacity: 1;}
    to {right: -500px; opacity: 0;}
}
#search-bar .bi-search {
    font-size: small;
    position: absolute;
    margin: 7px 0 0 15px;
}
#user-menu{
    position: fixed;
    background: white;
    width: 300px;
    z-index: 11;
    margin-top: 70px;
    right: 5px;
    box-shadow: -15px 15px 35px 0 rgba(0, 0, 0, .3);
    padding: 10px;
    border-radius: 12px;
    border-top: 1px solid #e9edf6;
}
#user-menu:before {
    content: '';
    position: absolute;
    top: -6px;
    right: 32px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
}
#user-menu .fa-rotate-left, #user-menu .fa-right-from-bracket{
    margin-top: 4px;
}
#user-menu .user-menu-header {
    background: #e9edf6;
    border-radius: 6px;
    margin-bottom: .5em;
}
#user-menu .user-menu-header .user-menu-header-row{
    display: flex;
    padding: 1em 1em;
}
#user-menu .user-menu-header .user-menu-header-row:first-child{
    align-items: center;
    border-bottom: 1px solid rgba(186,191,195, 0.5);
}
#user-menu .user-menu-header .user-menu-header-row > .content {
    padding-left: .5em;
    flex-grow: 1;
}
#user-menu .user-menu-header .user-menu-header-row > img {
    width: 32px;
    height: 32px;
}
#user-menu .user-menu-header .account-info > div {
    display: flex;
    justify-content: space-between;
}
#user-menu .user-menu-header .account-info .account-email {
    display: inline-block;
    font-size: 14px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#user-menu .user-menu-header .account-info .account-selection {
    font-size: 14px;
}
#user-menu .user-menu-header .support-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: .5em;
}
#user-menu .user-menu-header .support-info .separator {
    width: 1px;
    height: 40px;
    background-color: rgba(186,191,195, 0.5);
}
#user-menu ul{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    padding: 0 10px;
}
#user-menu ul li{
    padding: 5px 10px;
}
#user-menu ul li a{
    color: #27283c;
    display: block;
}
#user-menu ul li:hover{
    background: #e9edf6;
    border-radius: 6px;
}
#user-menu ul li.group{
    color: #8a8ca2;
    text-transform: uppercase;
    font-size: x-small;
}
#user-menu ul li.group:hover, #user-menu ul li.divider:hover{
    background: none;
}
#user-menu ul li.divider {
    border-top: 1px solid #eee;
    padding: 10px 0 0;
    margin: 5px -20px 0;
}
#main-menu li, #main-menu li:first-child, #secondary-menu li, #secondary-menu li:first-child, .navbar li {
    padding: 0px !important;
}
.navbar .notif .counter.badge.badge-pill.badge-danger {
    margin: 0 0 0 -12px;
    font-size: xx-small;
}
.navbar .notif a[aria-expanded="true"] i, .navbar .help a[aria-expanded="true"] i{
    color: #097ffa;
}
#help-menu{
    position: fixed;
    background: white;
    z-index: 11;
    margin-top: 70px;
    right: 35px;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, .3);
    padding: 20px 20px 10px;
    border-radius: 12px;
    border-top: 1px solid #e9edf6;
}
#help-menu:before {
    content: '';
    position: absolute;
    top: -6px;
    right: 51px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
}
#help-menu ul{
    padding-left: 0;
    margin-bottom: 10px;
    list-style: none;
    padding: 0 10px;
}
#help-menu ul li{
    padding: 5px 10px;
}
#help-menu ul li a{
    color: #27283c;
}
#help-menu ul li:hover{
    background: #e9edf6;
    border-radius: 6px;
}
#help-menu ul li i{
    margin-right: 10px;
    color: #8a8ca2;
}
#notif-menu{
    position: fixed;
    background: white;
    z-index: 11;
    margin-top: 70px;
    right: 35px;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, .3);
    padding: 20px 20px 10px;
    border-radius: 12px;
    border-top: 1px solid #e9edf6;
}
#notif-menu:before {
    content: '';
    position: absolute;
    top: -6px;
    right: 103px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
}
#notif-menu .menu-title{
    font-weight: bold;
}
#notif-menu ul{
    margin-bottom: 0;
    list-style: none;
    padding: 0;
    font-size: 14px;
}
#notif-menu ul li{
    padding: 15px 0 15px 30px;
    border-bottom: 1px solid #dee2e6;
    max-width: 300px;
}
/*** REMOVE THE FOLLOWING CLASS WHEN THE 'VIEW ALL NOTIF' IS IMPLEMENTED **/
#notif-menu ul li:last-child{
    padding: 15px 0 10px 30px;
    border-bottom: 0;
}
#notif-menu ul li a{
    padding: 0.125rem 0.5rem;
    font-size: small;
    line-height: 1.5;
    border-radius: 0.2rem;
    display: block;
    width: fit-content;
    margin-top: 5px;
    /*max-width: 50%;*/
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
}
#notif-menu ul li.info a{
    background: #17a2b8;
    color: white;
}
#notif-menu ul li.warning a{
    background: #ffc107;
    color: initial;
}
#notif-menu ul li.danger a{
    background: #dc3545;
    color: white;
}
#notif-menu ul li:before{
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-size: large;
    position: absolute;
    left: 20px;
}
#notif-menu ul li.info:before{
    content: "\f05a";
    color: #17a2b8;
}
#notif-menu ul li.warning:before{
    content: "\f071";
    color: #ffc107;
}
#notif-menu ul li.danger:before{
    content: "\f071";
    color: #dc3545;
}
#notif-menu ul li small{
    display: block;
    margin-top: 5px;
}
#notif-menu a.view-more{
    font-size: 14px;
    margin-top: 10px;
    display: block;
}
#dashboard-notifs .alert{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#dashboard-notifs .alert .btn-xs{
    float: none;
}
.alert .btn-xs{
    float: right;
}
.alert.notif{
    width: 500px;
    max-width: 100%;
    margin-left: -125px;
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 20px;
}
.promo-banner{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: #097ffa;
    background: linear-gradient(120deg, rgba(9,127,250,1) 0%, rgba(0,51,191,1) 75%);
    color: white;
    overflow: hidden;
}
.promo-banner .text{
    padding: 40px 60px;
}
.promo-banner .title{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.promo-banner .image{
    background-repeat: no-repeat !important;
    background-size: calc(100% - 100px) !important;
    background-position: center !important;
}
.promo-banner p{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: x-large;
}
.promo-banner p.small{
    font-size: large;
}
.promo-banner .btn-light.blue{
    color: #097ffa !important;
}
#nca_welcome_banner .row{
    background: url(https://s.whc.ca/nca/welcome-new-client-area-2.svg) no-repeat bottom -25px right 100px;
    background-size: 475px;
}
#nca_welcome_banner .close{
    position: absolute;
    right: 20px;
    top: 0px;
}
#nca_welcome_banner h2, #nca_welcome_banner p{
    max-width: 50%;
}
.btn-default.btn-round{
    border-radius: 50%;
    background-clip: padding-box;
    margin-left: 4px;
    margin-right: 4px;
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #282a35;
    border-color: #dee2e6;
}
.btn-default.btn-round:hover{
    background: #e9edf6;
}
#main, #main_placeholder, .pending-account-verification-container{
    margin: 95px auto 25px auto;
}
#main #page-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#main #page-header .current{
    color: #097ffa;
}
#main #page-header .dropdown{
    display: inline-block;
}
.ui-sortable-helper:hover{
    cursor: grabbing;
}
.ui-sortable-placeholder{
    background: #ffffff50;
    /*box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);*/
    border: 2px dashed #8a8ca250;
    border-radius: 12px;
    margin-top: 30px;
    visibility: visible !important;
}
.home-list{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 20px;
    margin-top: 30px;
    transition: .2s;
}
.ui-sortable-helper .home-list{
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, .3);
}
.home-list .list-title{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    /*	font-size: x-large;*/
    font-size: 21px;
    font-weight: bold;
    width: calc(100% - 150px);
    display: inline-block;
}
.home-list .list-title:hover{
    cursor: grab;
}
.home-list:hover:before{
    content: "\e410";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    color: #8a8ca250;
    position: absolute;
    margin-left: 35%;
    font-size: x-large;
}
.ui-sortable-helper .home-list:hover:before{
    margin-left: 45%;
}
.home-list .list-title i{
    color: #c32126;
    margin-right: 10px;
}
.home-list a.manage-all{
    float: right;
    margin-top: 5px;
}
.home-list a.manage-all i{
    margin-left: 10px;
    font-size: small;
}
.home-list ul{
    list-style: none;
    padding-left: 0;
    margin: -10px 0;
}
.home-list ul li{
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.home-list ul li:last-child{
    margin-bottom: 0;
    border-bottom: 0;
}
.home-list ul li:hover {
    background: #e9edf640;
}
.home-list .quick-shortcuts{
    display: table-cell;
    text-align: right;
}
.home-list .quick-shortcuts .btn-primary{
    margin-left: 5px;
}
.home-list .quick-shortcuts .dropdown{
    display: inline-block;
}
.home-list .status{
    margin-right: 10px;
}
/*.home-list .service-name{
	font-weight: 600;
}*/
.home-list .service-info-lines .service-name{
    display: block;
}
.home-list .quick-shortcuts i.fa-cog{
    margin-right: 5px;
}
.home-list .modal .modal-header i{
    color: #c32126;
    margin-right: 5px;
}
.home-list .modal .text-box{
    margin-bottom: 20px;
    background-color: #eee;
    padding: 15px;
    border-radius: 4px;
    font-weight: bold;
    line-height: normal;
    min-height: 76px;
}
.home-list .modal .text-box span, .home-list .modal .text-box a{
    display: block;
    font-weight: normal;
    font-size: small;
}
.home-list .modal .text-box input[type="password"]{
    background: none;
    border: 0;
}
.home-list .modal .text-box a.btn{
    margin-top: -5px !important;
}
.home-list .domain-name, .home-list .service-domain{
    color: initial;
}
.home-list .domain-name:hover, .home-list .service-domain:hover{
    color: #097ffa;
    cursor: pointer;
}
.home-list .service-domain{
    font-weight: 600;
}
.status.active i, .status.enabled i{
    color: #5cb85c;
    font-size: small;
    margin-right: 5px;
}
.status.disabled i{
    color: #dc3545;
    font-size: small;
    margin-right: 5px;
}
.app-widget ul{
    padding-left: 0;
    margin-bottom: 0;
}
.app-widget ul li{
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    line-height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.app-widget ul li:first-child{
    padding-top: 0;
}
.app-widget ul li:last-child{
    padding-bottom: 0;
    border-bottom: none;
}
.app-widget .app-info-lines small {
    display: block;
    margin-top: -18px;
}
.app-widget  .quick-shortcuts{
    text-align: right;
}
.app-widget .quick-shortcuts .btn-primary{
    margin-left: 5px;
}
.apps-widgets .no-service, .whc-panel .no-service {
    background-color: #097ffa20;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.whc-panel .row .no-service{
    width: 100%;
    margin: 0 15px;
}
.apps-widgets .no-service p, .whc-panel .no-service p{
    margin-bottom: 0;
    min-height: unset !important;
    color: initial;
    font-size: inherit !important;
}
#register-domain{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
#register-domain input{
    border-radius: 6px !important;
}
#register-domain button{
    background: none;
    border: none;
    position: absolute;
    right: 10px;
    line-height: 36px;
    font-size: large;
    color: #097ffa;
}
#domains{
    margin-bottom: 30px;
}
#breadcrumb .content-title{
    font-family: 'Poppins', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: bold;
    font-size: xx-large;
    line-height: 1.1em;
}
#breadcrumb ul{
    list-style: none;
    padding-left: 20px;
    margin-bottom: 0;
    display: inline-block;
    font-size: small;
    color: #8A8CA2;
}
#breadcrumb ul li{
    display: inline-block;
    margin-right: 2px;
}
#breadcrumb ul li:after{
    content: '/';
    margin-left: 5px;
}
#breadcrumb ul li:last-child:after{
    content: none;
    margin-left: 0;
}
#breadcrumb ul li:first-child:before{
    content: "\e487";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: medium;
    margin-right: 5px;
}
#services-cards{
    margin: 20px 0;
}
#services-cards .card{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    transition: .4s;
}
#services-cards .card:hover{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
}
#services-cards .card img{
    border-bottom: 1px solid #eee;
}
#services-cards .card .card-title{
    font-weight: bold;
    margin-bottom: 0;
}
#services-cards .card .card-text{
    font-size: small;
    text-transform: uppercase;
}
#services-cards #add-new-service h4{
    margin: 10px 0 0;
}
#services-cards #add-new-service .fa-plus-circle{
    font-size: 54px;
    opacity: .5;
}
.bulk-wrapper, .view-wrapper{
    display: inline-block;
}
.bulk-wrapper:before{
    content: "\f144";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    position: absolute;
    margin: 6px 0 0 24px;
    color: #212529;
}
.view-wrapper:before{
    content: "\f06e";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    position: absolute;
    margin: 6px 0 0 24px;
    color: #212529;
}
.view-wrapper #view{
    padding-left: 38px;
}
.bulk-wrapper .custom-select, .view-wrapper .custom-select{
    display: inline-block;
    width: 155px;
    margin-left: 10px;
    margin-bottom: 4px;
}
.table #bulk-actions-selection{
    display: none;
}
.table #bulk-actions-selection i{
    color: #8a8ca2;
}
.table #columns {
    margin-top: -35px;
}
#columns ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
#columns ul li {
    display: flex;
    justify-content: space-between;
}
#columns ul li label {
    font-weight: normal;
}
#columns .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color: #007bff;
    border-color: #007bff;
}
#filters-actions .form-row:before {
    content: "\f002";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    position: absolute;
    margin-left: 15px;
    z-index: 1;
}
#filters-actions input[type="search"]{
    padding-left: 35px;
}
#filters-actions .fa-filter{
    padding-right: 5px;
}
#filters-actions #filters{
    width: 380px;
    /*    max-width: 100%;*/
    margin-left: -5px;
}
.table #filters-actions #filters {
    margin-top: -35px;
}
#filters-actions #filters-actions #filters{
    margin-top: -35px;
}
#filters-actions #filters ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
#filters-actions #filters ul li {
    display: flex;
    justify-content: space-between;
}
#filters-actions #filters ul li > label, #filters-actions #filters ul li .multiselect{
    width: 50%;
}
#filters-actions #filters ul li > label{
    line-height: 38px;
}
#filters-actions #filters ul li > select, #filters-actions #filters ul li > input {
    width: 50%;
}
#filters-actions #filters #reset_filters {
    font-weight: normal;
    font-size: small;
    text-align: center;
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #eee;
}
#filters-actions #active-filters{
    margin-top: 10px;
}
#filters-actions #active-filters .badge{
    padding-left: 10px;
}
#filters-actions #active-filters button{
    border: 0;
    background: none;
}
#filters-actions .aff-ref-filter-opt #filter_product.long-dropdown{
    overflow-y: scroll;
    max-height: 260px;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #28a745;
    background-color: #28a745;
}
#popular-topic{
    border-radius: 12px;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
}
#popular-topic .list-group-item:before, #kb-suggestions .list-group-item:before{
    content: '\f059';
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #c32126;
    float: left;
    margin-right: 10px;
}
#popular-topic .list-group-item:after, #kb-suggestions .list-group-item:after{
    content: '\f054';
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #097ffa;
    float: right;
}
#kb-suggestions small{
    display: block;
}
.table{
    margin-top: 10px;
    border-radius: 12px;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    background: white;
}
.table.table-borderless{
    box-shadow: none;
}
.table.table-middle td{
    vertical-align: middle;
}
.table .form-check{
    display: inline-block;
    position: absolute;
    margin-top: -2px;
    margin-left: -30px;
}
.table thead .form-check{
    margin-top: 0;
}
.table .form-check input{
    width: 16px;
    height: 16px;
}
.table thead tr:first-child td{
    border-top: none;
}
.table thead tr:first-child td:first-child{
    padding: 20px 20px 10px 20px;
}
.table thead tr:last-child td{
    border-top: none;
    vertical-align: baseline;
}
.table thead td {
    padding: .75rem 10px;
}
.table-domains thead td:nth-child(2), .table-domains thead td:nth-child(3), .table-domains thead td:nth-child(4){
    width: 125px;
}
.table td {
    /*padding: .25rem 10px;*/
    padding: 10px;
}
.table tbody tr:hover{
    background: rgba(138, 140, 162,.15);
}
.table-domains td:nth-child(2){
    text-align: left;
}
.table thead tr{
    /*
        background: #33354F;
        color: white;
    */
    font-weight: bold;
}
.table-domains thead tr td, .table-domains tbody tr td{
    text-align: center;
    vertical-align: middle;
    line-height: normal;
}
.table thead tr th:first-child, .table thead tr td:first-child, .table tbody tr td:first-child, .table tbody tr th:first-child{
    padding-left: 20px;
}
.table-domains thead tr td:first-child, .table-domains tbody tr td:first-child{
    text-align: left;
    padding-left: 50px;
}
.table tbody tr td:last-child{
    padding-right: 20px;
}
.table-domains tbody tr td:last-child{
    text-align: right;
    line-height: 32px;
    /*    width: 265px;*/
    width: 155px;
}
.table .dropdown-menu.show {
    display: block;
    position: fixed !important;
    top: auto !important;
    left: auto !important;
}
.dropdown-menu i{
    margin-right: 10px;
    color: #8a8ca2;
}
/*
.table tbody tr:last-child td:last-child{
    padding-right: 20px;
}
*/
.btn .fa-cog, .btn .bi-gear-fill{
    /*margin-right: 5px;*/
    display: none;
}
.table tbody td{
    /*line-height: 36px;*/
    font-size: 15px;
}
.table a.domain-name{
    color: #212529;
    font-weight: 600;
    margin-bottom: 5px;
    display: inline-block;
}
.table a.domain-name:hover{
    color: #097ffa;
}
.table .domain-info-lines .domain-name, .table .domain-info-lines .domain-renewal {
    display: block;
    line-height: .8;
}
.table-filter{
    font-size: small;
}
.table-filter .form-control{
    display: inline-block;
    width: auto;
    margin-left: 12px;
}
.table-filter #bulk-action{
    padding-left: 34px;
}
.table-pagination{
    font-size: small;
    margin-bottom: 20px;
}
.table-pagination .custom-select{
    display: inline-block;
    width: auto;
}
.table-pagination .paginate{
    float: right;
}
.table-pagination .paginate .page-link {
    color: initial;
}
.table-pagination .paginate .disabled .page-link{
    color: #6c757d;
}
.table-pagination .paginate .page-item.active .page-link{
    background: #33354F;
    border-color: #33354F;
    color: white;
}
.table .custom-switch{
    /*transform: scale(1.5);
    margin: 8px -8px -8px 0;*/
}
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    opacity: .5;
}
.table #register-domain {
    margin-top: 0;
    padding-top: 5px;
    border-top: none;
    padding-bottom: 5px;
}
.table #register-domain:before {
    content: "\f067";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #8a8ca2;
    position: absolute;
    left: -30px;
    margin-top: 2px;
    font-size: large;
}
.tab-content{
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 4px 4px;
}
.status{
    font-weight: 600;
    font-size: 11px;
}
.status.badge{
    background: #e4e5e7;
}
.status i{
    font-size: x-small;
    margin-right: 3px;
    margin-left: -3px;
    color: #5c5f62;
}
.status.Active, .status.Awaiting, .status.Online, .status.Paid{
    background: #5cb85c40;
}
.status.Active i, .status.Awaiting i, .status.Online i, .status.Paid i{
    color: #5cb85c;
}
.status.Expired, .status.Progress{
    background: #ffc10730;
}
.status.Expired i, .status.Progress i{
    color: #ffc107;
}
.status.Offline, .status.Unpaid{
    background: #dc354540;
}
.status.Offline i, .status.Unpaid i{
    color: #dc3545;
}
.websites-filter{
    float: right;
}
.websites-filter i{
    margin-right: 5px;
}
.websites-filter .current{
    color: #097ffa;
}
.services-list .service-line {
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    line-height: 38px;
}
.services-list .service-line .domain{
    font-weight: bold;
    line-height: 1.2em;
    padding-left: 42px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 40px;
}
.services-list .service-line .domain:before{
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    color: #c32126;
    margin-right: 10px;
    font-size: x-large;
    margin-top: 11px;
    position: absolute;
    margin-left: -42px;
    text-align: center;
    width: 28px;
}
.services-list .service-line .domain a, .apps-widgets .app-info-lines a{
    color: #27283c;
}
.services-list .service-line .domain a:hover, .apps-widgets .app-info-lines a:hover{
    color: #097ffa;
}
.services-list .service-line.dns .domain:before{
    content: "\f1e0";
}
.services-list .service-line.web .domain:before{
    content: "\f233";
}
.services-list .service-line.reseller .domain:before{
    content: "\f0e8";
}
.services-list .service-line.wordpress .domain:before{
    content: "\f411";
    font-family: 'Font Awesome 6 Brands';
}
.services-list .service-line.weebly .domain:before{
    content: "\f5cc";
    font-family: 'Font Awesome 6 Brands';
}
.services-list .service-line.wp .domain:before{
    content: "\f411";
    font-family: 'Font Awesome 6 Brands';
    font-weight: normal;
}
.services-list .service-line.cloud .domain:before{
    content: "\f0c2";
}
.services-list .service-line.dedicated .domain:before{
    content: "\f0a0";
}
.services-list .service-line.email .domain:before{
    content: "\f0e0";
}
.services-list .service-line.email-pro .domain:before{
    content: "\40";
}
.services-list .service-line.ssl .domain:before{
    content: "\f023";
}
.services-list .service-line.cloud .details .secondary-actions, .services-list .service-line.dedicated .details .secondary-actions, .services-list .service-line.ssl .details .secondary-actions{
    width: auto;
}
.services-list .service-line .domain .product{
    font-size: small;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.services-list .service-line .details{
    display: flex;
    min-width: 345px;
    justify-content: space-between;
}
.services-list .service-line .details .secondary-actions{
    margin-right: 10px;
    width: 130px;
    text-align: right;
}
.services-list .service-line .details .secondary-actions .dropdown{
    display: inline-block;
}
.services-list .service-line .details .product{
    width: 200px;
    text-align: center;
    font-size: small;
    text-transform: uppercase;
    color: #6c757d;
}
.services-list .service-line .details .status{
    width: 120px;
    text-align: center;
}
.services-list .service-line .details .status .badge{
    width: auto;
}
.websites-grid{
    clear: both;
}
.websites-grid .website-card{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    margin-bottom: 30px;
    transition: .2s;
}
.websites-grid .website-card:hover{
    box-shadow: 0 8px 8px rgb(0 0 0 / 12%), 0 2px 8px rgb(0 0 0 / 4%);
    margin: -2px 0 0;
}
.websites-grid .website-card img{
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #e9edf6;
    height: 225px;
    width: 100%;
    object-fit: cover;
}
.websites-grid .website-card img:hover{
    cursor: pointer;
}
.websites-grid .website-card #noThumbnail {
    height: 225px;
    background: #fff;
    box-shadow: inset 0 0 100px 0 #8a8ca2;
    border-bottom: 1px solid #e9edf6;
    border-radius: 12px 12px 0 0;
}
.websites-grid .website-card #noThumbnail:before {
    content: '\e1b7';
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    position: absolute;
    top: 70px;
    left: calc(50% - 25px);
    font-size: 40px;
    color: #8a8ca2;
}
.websites-grid .website-card #noThumbnail:after {
    content: 'No image available';
    font-size: x-small;
    text-transform: uppercase;
    color: #8a8ca2;
    position: absolute;
    top: 130px;
    display: block;
    width: calc(100% - 25px);
    text-align: center;
}
.websites-grid .website-card .infos:before {
    width: calc(100% - 30px);
    height: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgb(39 40 60 / 10%) 100%);
    content: '';
    position: absolute;
    margin: -106px -20px 0 -20px;
}
.websites-grid .website-card .infos{
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.websites-grid .website-card .domain{
    font-weight: bold;
    color: #27283c;
}
.websites-grid .website-card .domain:hover{
    color: #097ffa;
    cursor: pointer;
}
.websites-grid .website-card .product{
    font-size: small;
    text-transform: uppercase;
    color: #6c757d;
}
.websites-grid .website-card .btn.text-secondary{
    padding: 0.375rem;
}
.websites-grid .website-card .btn .fa-cog, .websites-grid .website-card .btn .bi-gear-fill{
    display: block;
}
#quick-guides{
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 14px;
}
#quick-guides .card{
    margin-bottom: 20px;
    height: calc(100% - 20px);
    padding-bottom: 30px;
}
#quick-guides .card:after{
    content: "\f05a";
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #8a8ca2;
    opacity: .2;
    position: absolute;
    bottom: 0;
    right: 15px;
    font-size: 50px;
}
#quick-guides .card a{
    position: absolute;
    bottom: 20px;
}
#quick-guides .text-secondary i{
    margin-left: 5px;
}
.domains .register-domain i{
    margin-right: 8px;
    color: #c32126;
}
.box label, .modal label{
    font-weight: 500;
}
/**** DETAILS PAGE ****/

#details-page .main-section{
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#details-page .main-section .domain{
    font-size: xx-large;
    font-weight: bold;
    margin-bottom: -10px;
}
#details-page .main-section .domain .product{
    display: inline-block;
}
#details-page .main-section .domain .dropdown{
    display: inline-block;
}
#details-page .main-section .domain .dropdown-menu i{
    margin-right: 5px;
    color: #8a8ca2;
}
#details-page .main-section .domain .dropdown-menu small{
    margin-left: 10px;
    color: #8a8ca2;
}
#details-page .main-section .domain i.fa-unlock{
    font-size: medium;
    margin-right: 5px;
}
#details-page .main-section .domain i.fa-lock{
    font-size: medium;
    margin-right: 5px;
}
#details-page .main-section .domain a i.fa-circle-chevron-down{
    font-size: medium;
    margin-left: 5px;
    color: #8a8ca2;
}
#details-page .main-section .domain a i.fa-arrow-up-right-from-square{
    font-size: medium;
    color: #097ffa;
    margin-left: 5px;
}
#details-page .main-section .domain .product-name{
    font-size: x-large;
    font-weight: normal;
    color: #8a8ca2;
    margin-left: 5px;
    padding-left: 15px;
    border-left: 1px solid #ccc;
}
#details-page .main-section .domain .status{
    margin-left: 10px;
}
#details-page .main-section .main-infos{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
#details-page .main-section .main-infos li{
    display: inline-block;
    font-size: 14px;
    margin-right: 10px;
    color: #8a8ca2;
}
#details-page .main-section .main-actions{
    align-self: flex-end;
    min-width: 137px;
    text-align: right;
}
#details-page .main-section .main-actions .btn-cpanel{
    background: #f15a24;
    color: white;
    font-size: 50px;
    height: 38px;
    width: 90px;
}
#details-page .main-section .main-actions .btn-cpanel i{
    position: absolute;
    bottom: 21px;
    right: 76px;
}
#details-page .main-section .main-actions .dropdown{
    display: inline-block;
}
#details-page h2, .box h2{
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9edf6;
}
#details-page h2 small{
    color: #8a8ca2;
    margin-left: 5px;
}
#details-page .alert h2{
    padding-bottom: 0;
    border-bottom: 0;
}

#details-page .dropdown .fa-duotone{
    color: #8a8ca2;
}
#details-page #syncWay, #details-page #live-to-staging img, #details-page #staging-to-live img{
    max-height: 125px;
    display: block;
    margin: 0 auto 10px;
}
#details-page #wpSyncForm label{
    font-weight: 400;
}
#rewrite_rules, #lineCounter {
    font-family: lucida console, courier new, courier, monospace;
    margin: 0;
    padding: 10px 0;
    height: 300px;
    border-radius: 3px;
    resize: none;
    font-size: 13.5px;
    line-height: 20px;
    outline: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#lineCounter:focus-visible, #rewrite_rules:focus-visible {
    outline:none;
}
#lineCounter {
    border: none;
    display: flex;
    overflow-y: hidden;
    text-align: right;
    box-shadow: none;
    font-size: small;
    line-height: 20px;
    position: absolute;
    width: 20px;
    height: 298px;
    margin: 1px;
    background: #e9edf6;
    color: #8a8ca2;
    border-right: none;
    border-radius: 2px 0px 0px 2px;
}
#rewrite_rules {
    padding-left: 30px;
    width:100%;
}
.card-body{
    padding: 0;
}
.card h5{
    font-size: large;
}
.card h6{
    font-size: small;
    text-transform: uppercase;
    font-weight: normal;
}
.card .text-primary i.fa-chevron-right{
    font-size: small;
}
#details-page .section .section-action{
    float: right;
    margin-top: -3px;
}
#details-page .section p{
    color: #6c757d;
    min-height: 60px;
    font-size: 14px;
}
#details-page i.icon, .box i.icon{
    float: left;
    font-size: 22px;
    color: #c32126;
    margin: 1px 10px 0 0;
}
#details-page i.icon.fa-share{
    position: absolute;
    margin: 10px 0 0 -22px;
    -webkit-text-stroke: 1.5px white;
    text-stroke: 1.5px white;
    color: #c32126;
    font-size: medium;
}
.modal .icon.fa-share{
    position: absolute;
    margin: 13px 0 0 -14px;
    -webkit-text-stroke: 1.5px white;
    text-stroke: 1.5px white;
    color: #c32126;
    font-size: medium;
}
#details-page .section .actions{
    display: flex;
    justify-content: space-between;
}
#details-page .section .actions .btn-light.more{
    border-radius: 50%;
    border: 1px solid #e9edf6;
}
#details-page .section .more-options{
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #6c757d;
}
#details-page .section .more-options .fa-stack {
    color: #e9edf6;
}
#details-page .section .more-options .fa-stack-1x{
    color: #097ffa;
}
#details-page .section .more-options .fa-stack:hover{
    color: #097ffa;
}
#details-page .section .more-options .fa-stack:hover .fa-stack-1x{
    color: white;
}
#details-page .section .more-options .option{
    display: block;
    margin-top: 5px;
}
#details-page .infos ul{
    padding-left: 0;
    list-style: none;
}
#details-page .infos ul li{
    padding-bottom: 17px;
}
#details-page .infos ul li:last-child{
    padding-bottom: 0;
}
#details-page .infos ul li .info{
    font-weight: bold;
}
#details-page .infos ul li .info i{
    font-size: small;
}
#details-page .infos ul li .value{
    font-size: 14px;
    color: #6c757d;
}
#details-page .infos ul li ul li{
    padding-bottom: 0;
}
#details-page .addons ul{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
#details-page .addons ul li{
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9edf6;
}
#details-page .addons ul li:last-child{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
#details-page .addons ul li .fa-stack{
    color: #e9edf6;
    float: left;
    margin: 0 15px 0 -10px;
}
#details-page .addons ul li .fa-stack-1x{
    color: #097ffa;
    margin-top: -2px;
}
/*
#details-page .addons ul li .fa-search{
    color: #0062ff;
}
#details-page .addons ul li .fa-mailbox{
    color: #dc3545;
}
#details-page .addons ul li .fa-lock{
    color: #ffc107;
}
#details-page .addons ul li .fa-tools{
    color: #17a2b8;
}
*/
#details-page .addons ul li .addon-name{
    font-weight: bold;
    display: block;
}
#details-page .addons ul li .addon-name .badge{
    margin-left: 10px;
}
#details-page .addons ul li .addon-desc{
    font-size: 14px;
    color: #8a8ca2;
}
#details-page .addons ul li .addon-desc .price {
    display: none;
}
#details-page .section ul li .addon-desc p{
    min-height: auto;
}
#details-page .addons ul li .btn{
    margin-left: 15px;
    align-self: center;
}
#details-page .addons ul li .price-cta{
    display: flex;
    align-items: center;
    margin-left: 20px;
}
#details-page .addons ul li .price-cta .price-addon{
    white-space: nowrap;
}
#details-page .addons ul li .price-cta .price-addon strong{
    color: #c32126;
}

/**** ADDONS ICONS ****/
/* ANTISPAM */
#details-page .addons .addon-11 .fa-duotone.fa-grid-2-plus:before{
    content: '\f813';
}
#details-page .addons .addon-11 .fa-duotone.fa-grid-2-plus:after{
    content: '\f813\f813';
}
/* PREMIUM SSL + DEDICATED IP  */
#details-page .addons .addon-1 .fa-duotone.fa-grid-2-plus:before{
    content: '\f30d';
}
#details-page .addons .addon-1 .fa-duotone.fa-grid-2-plus:after{
    content: '\f30d\f30d';
}
/* PRO INSTALL  */
#details-page .addons .addon-2 .fa-duotone.fa-grid-2-plus:before{
    content: '\f019';
}
#details-page .addons .addon-2 .fa-duotone.fa-grid-2-plus:after{
    content: '\f019\f019';
}
/* DEDICATED IP  */
#details-page .addons .addon-3 .fa-duotone.fa-grid-2-plus:before{
    content: '\e51f';
}
#details-page .addons .addon-3 .fa-duotone.fa-grid-2-plus:after{
    content: '\e51f\e51f';
}
/* WEB HELP  */
#details-page .addons .addon-4 .fa-duotone.fa-grid-2-plus:before{
    content: '\f7d9';
}
#details-page .addons .addon-4 .fa-duotone.fa-grid-2-plus:after{
    content: '\f7d9\f7d9';
}
/* SITE TRANSFER */
#details-page .addons .addon-6 .fa-duotone.fa-grid-2-plus:before{
    content: '\f0ec';
}
#details-page .addons .addon-6 .fa-duotone.fa-grid-2-plus:after{
    content: '\f0ec\f0ec';
}
/* RANKINGCOACH */
#details-page .addons .addon-20 .fa-duotone.fa-grid-2-plus:before{
    content: '\f002';
}
#details-page .addons .addon-20 .fa-duotone.fa-grid-2-plus:after{
    content: '\f002\f002';
}
/* SITE SAFE */
#details-page .addons .addon-10 .fa-duotone.fa-grid-2-plus:before{
    content: '\f3ed';
}
#details-page .addons .addon-10 .fa-duotone.fa-grid-2-plus:after{
    content: '\f3ed\f3ed';
}
/* WHMCS LICENSE */
#details-page .addons .addon-21 .fa-duotone.fa-grid-2-plus{
    font-family: "Font Awesome 6 Brands";
}
#details-page .addons .addon-21 .fa-duotone.fa-grid-2-plus:before{
    content: '\f40d';
    margin-left: -13px;
}
#details-page .addons .addon-21 .fa-duotone.fa-grid-2-plus:after{
    display: none;
}


#details-page #contact-info p{
    margin-bottom: 0;
}
#details-page ul.list, ul.list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
#details-page ul.list li:not(:last-child), ul.list li:not(:last-child){
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9edf6;
}
#details-page ul.list li, ul.list li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#domain-email-forwarding ul.list li span {
    width: 35%;
}
#details-page #domain-domain-forwarding ul.list li{
    display: block;
}
#details-page #domain-domain-forwarding ul.list li strong{
    display: inline-block;
    width: 120px;
}
#details-page ul.list li .custom-switch{
    display: inline-block;
}
#details-page ul.list li i.fa-circle-info, #details-page ul.list li i.fa-chevron-right, i.fa-duotone.fa-circle-info{
    font-size: small;
    color: #8a8ca2;
}
#details-page .whc-panel .moreOptions{
    font-size: small;
}
#details-page .whc-panel .moreOptions i{
    font-size: x-small;
}
#details-page .whc-panel .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: 60px;
}
#details-page .whc-panel.addons .item{
    height: auto;
}
#details-page .whc-panel .item .arrow{
    display: none;
}
#details-page .whc-panel.addons .item{
    margin-bottom: 15px;
}
#details-page .whc-panel:not(.addons) .item:nth-last-child(-n+2){
    margin-bottom: 0;
}
#details-page .whc-panel.addons .item:last-child {
    margin-bottom: 0;
    margin-top: 0;
}
#details-page .whc-panel .item .item-details{
    padding-left: 75px;
}
#details-page .whc-panel .item .item-details .fa-stack {
    position: absolute;
    margin-left: -87px;
    margin-top: -5px;
}
#details-page .whc-panel .item .item-details .fa-square{
    color: #e9edf6;
}
#details-page .whc-panel .item.wordpress .item-details .fa-square{
    color: #097ffa;
}
#details-page .whc-panel .item .item-details .fa-fw{
    color: #097ffa;
    /*    margin-top: -2px;*/
}
#details-page .whc-panel .item.wordpress .item-details .fa-fw{
    color: white;
}
#details-page .whc-panel .item .item-details .item-desc{
    display: block;
}
#details-page .whc-panel .item .btn-outline-dark, #details-page .whc-panel .item .btn-primary, #details-page .whc-panel.addons .item .btn-outline-primary{
    min-width: 100px;
}
#details-page .whc-panel .item .btn-outline-dark i{
    display: none;
}
#details-page .whc-panel label{
    font-weight: 600;
}
#details-page .whc-panel .quickActions{
    position: absolute;
    margin-top: -35px;
    right: 20px;
}
#details-page .stat .used{
    float: right;
}
#upgrade .service {
    font-size: xx-large;
    font-weight: bold;
    margin-bottom: 20px;
}
#upgrade .service .domain {
    font-size: x-large;
    font-weight: normal;
    color: #8a8ca2;
    margin-left: 5px;
    padding-left: 15px;
    border-left: 1px solid #ccc;
}
#upgrade .card{
    margin-bottom: 10px;
    height: calc(100% - 10px);
    text-align: center;
}
#upgrade .card .plan-name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: x-large;
}
#upgrade .card .plan-price strong {
    font-size: x-large;
    color: #c32126;
}
#upgrade .card p{
    display: none;
}
#upgrade .card ul{
    text-align: left;
    padding-left: 0;
    list-style: none;
    margin-top: 20px;
}
#upgrade .card ul li:before{
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #28a745;
    margin-right: 10px;
}
#upgrade .card ul li.no{
    color: rgba(0,0,0,.5)!important;
}
#upgrade .card ul li.no:before{
    content: '\f00d';
    color: #dc3545;
}
.domain-fwd-selected {
    background: #cce5ff5c;
}
#planDetails .card{
    text-align: center;
}
#planDetails .card.current{
    border: 2px solid #097ffa;
}
#planDetails .details{
    list-style: none;
    padding-left: 0;
    text-align: left;
    font-size: 14px;
}
#planDetails .plan-name{
    text-transform: uppercase;
    font-weight: bold;
    font-size: x-large;
}
#planDetails .plan-price{
    font-size: large;
}
#planDetails .plan-price strong{
    font-size: x-large;
    color: #c32126;
}
#planDetails .plan-renews-at{
    margin: -5px 0 10px;
}
#planDetails .custom-switch{
    display: inline-block;
}
#planDetails .btn-outline-primary{
    margin-top: 10px;
}
.errors.list-group small.text-danger{
    display: block;
}
.modal li.list-group-item:hover {
    background: #e9edf685;
}
#advancedDnsManager table td, #privateNameservers table td{
    vertical-align: baseline;
}
#advancedDnsManager table td:last-child{
    width: 115px;
}
#advancedDnsManager table td label{
    width: 86px;
    justify-content: left;
}
#advancedDnsManager table tr:first-child th, #privateNameservers table tr:first-child th{
    border-top: none;
}
#advancedDnsManager .form-control-plaintext[readonly]{
    background-color: transparent;
}
#advancedDnsManager .module-header .row-fluid-xs{
    display: flex;
    justify-content: space-between;
}
#advancedDnsManager .module-header .row-fluid-xs .fluid-100{
    width: 50%;
}
#advancedDnsManager .help-block.span-err-txt{
    color: #dc3545;
    font-size: small;
}
#advancedDnsManager .module-header .btn-success{
    background-color: #007bff;
    border-color: #007bff;
}
#advancedDnsManager .module-header .btn-primary{
    background-color: transparent;
    border-color: #007bff;
    color: #007bff;
}
#advancedDnsManager .btn-edit{
    color: #097ffa;
}
#advancedDnsManager .dm2-remove-record, #advancedDnsManager .btn-cancel-record{
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
}
#advancedDnsManager tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
#advancedDnsManager tbody td{
    border-top: none;
}
#advancedDnsManager .form-control:disabled{
    background-color: transparent;
    opacity: 1;
    border: 0;
    padding: 0;
}
#advancedDnsManager .modal-body{
    padding-bottom: 20px;
}
#emptyListBackorder{
    text-align: center;
}
.table.backorderTable{
/*    border: 1px solid #ddd;*/
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
/*    border-top: 3px solid #C52127;*/
}
.table.backorderTable:not(#tableBackorderLatestResults) th:first-child, .table.backorderTable:not(#tableBackorderLatestResults) td:first-child{
    display: none;
}
.table.backorderTable td{
    vertical-align: baseline;
}
.table.backorderTable input{
    display: inline-block;
}
.list-group-item.selected{
    background: #cce5ff5c;
}
.domains-in-auction td:last-child, .domains-latest-results td:last-child{
    text-align: right;
}
.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip, .was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip {
    display: block;
    /*    margin: -8px 0 10px 0;*/
}
.iti__flag {
    background-image: url("../img/flags.png");
}
#affiliateStats .box{
    height: 100%;
    font-size: large;
    padding-top: 20px;
}
#affiliateStats .fa-stack{
    float: left;
    margin: 14px 20px 0 0;
    font-size: 2.5em;
}
#affiliateStats span:not(.fa-stack){
    display: block;
    font-size: 3em;
    font-weight: 600;
    margin-bottom: -10px;
}
#affiliateStats.huge span:not(.fa-stack){
    font-size: 2.5em;
    margin-top: 10px;
}
#affiliateStats .visitors .fa-circle{
    color: #097ffa20;
}
#affiliateStats .visitors .fa-stack-1x{
    color: #097ffa;
}
#affiliateStats .conversions .fa-circle{
    color: #17a2b820;
}
#affiliateStats .conversions .fa-stack-1x{
    color: #17a2b8;
}
#affiliateStats .signups .fa-circle{
    color: #28a74520;
}
#affiliateStats .signups .fa-stack-1x{
    color: #28a745;
}
.referralLinkActions{
    position: absolute;
    margin-top: -58px;
    right: 50px;
}
.hide {
    display: none !important;
}
.whc-hide {
    display: none;
}
/*
.hidden, .w-hidden{
    display: none;
}
*/
.attachments{
    font-size: small;
    margin-bottom: 20px;
}
#userManagement .form-check, #contactManagement .form-check{
    margin-bottom: 0.5rem;
}
input::placeholder{
    color: #8a8ca2 !important;
}
.form-group:not(.form-check) input ~ label, .form-group:not(.form-check) select ~ label {
    position: absolute;
    opacity: 0;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
    line-height: 1.5;
    color: #777;
    pointer-events: none;
    cursor: text;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: all .1s ease-in-out;
    font-size: 16px;
    margin: -33px 0 0 7px;
}
.form-group:not(.form-check) input:not(:placeholder-shown) ~ label, .form-group:not(.form-check) select:not(:placeholder-shown) ~ label  {
    font-size: 12px;
    color: #777;
    opacity: 1;
    background: white;
    width: auto;
    padding: 0 5px;
    margin: -10px 0 0 22px;
    margin: -49px 0 0 7px;
}
.form-group:not(.form-check) select:not(:placeholder-shown) ~ label {
    margin: -48px 0 0 11px;
}
.ticket-reply{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px 0 12px 12px;
    padding: 30px;
    height: calc(100% - 30px);
    margin: 0 0 20px auto;
    display: inline-block;
    text-align: left;
    float: right;
    clear: both;
    width: 85%;
    background:white;
}
.ticket-reply.staff{
    border-radius: 0 12px 12px 12px;
    margin: 0 auto 30px 0;
    float: left;
}
.ticket-reply .posted-by{
    border-bottom: 1px solid #e9edf6;
    padding-bottom: 15px;
    padding-left: 45px;
}
.ticket-reply .posted-by i{
    position: absolute;
    font-size: xx-large;
    margin: 6px 0 0 -45px;
}
.ticket-reply .posted-by i.fa-whc{
    margin-left: -50px;
}
.ticket-reply .posted-by small{
    display: block;
}
.ticket-reply .attachments{
    margin-top: 30px;
}
.ticket-reply .ratingReply{
    border-top: 1px solid #e9edf6;
    padding-top: 15px;
    margin-top: 15px;
}
.ticket-reply .attachments + .ratingReply{
    margin-top: 0;
}
.ticket-reply .rating,
.ticket-reply .rating-done{
    font-size: 18px;
    display: inline-block;
    margin-left: 10px;
}
.ticket-reply .rating{
    direction: rtl;
}
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star{
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    display: inline-block;
}
.ticket-reply .rating-done .rated {
    display: inline-block;
    font-size: small;
    color: #6c757d;
    margin-left: 10px;
}
.ticket-reply .rating span.star:hover{
    cursor: pointer;
}
.ticket-reply .rating span.star:before,
.ticket-reply .rating-done span.star:before{
    content: "\f005";
    padding-right: 0;
    color: #999;
}
.ticket-reply .rating span.star:hover:before,
.ticket-reply .rating span.star:hover ~ span.star:before,
.ticket-reply .rating-done span.star.active:before  {
    content: "\f005";
    color: #F2DE88;
}
/*
.ticket-reply .rating:not(.rated) span.star:hover:before,
.ticket-reply .rating.rated.rated-1 span.star:first-of-type:before,
.ticket-reply .rating.rated.rated-2 span.star:nth-child(-n+2):before,
.ticket-reply .rating.rated.rated-2 span.star:nth-child(-n+3):before,
.ticket-reply .rating.rated.rated-2 span.star:nth-child(-n+4):before,
.ticket-reply .rating.rated.rated-2 span.star:nth-child(-n+5):before{
    content: "\f005";
    color: #F2DE88;
}
*/
.btn-round i.fa-eye, .btn-round i.fa-star, .btn-round i.fa-link{
    margin-left: -1px;
}
#tableInvoicesList thead td:first-child, #tableSubscriptionsList thead td:first-child{
    padding: 3px 2px 10px 2px;
}
#tableInvoicesList td:last-child, #tableSubscriptionsList td:last-child{
    text-align: right;
}
#tableInvoicesList td:last-child #active-filters {
    text-align: left !important;
}
#tableInvoicesList th:first-child a{
    color: initial;
}
#tableInvoicesList th:first-child a:hover{
    color: #097ffa;
}
#tableSubscriptionsList td{
    padding-top: 15px;
    padding-bottom: 15px;
}
#tableSubscriptionsList .service, #tableSubscriptionsList .date{
    display: block;
    margin-top: -6px;
}
#tableSubscriptionsList small.text-muted{
    display: block;
    margin-bottom: -5px;
}
#tableSubscriptionsList .dropdown-menu.show {
    margin-top: -30px;
}
#paymentMethods, #credits{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
#paymentMethods li, #credits li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9edf6;
}
#paymentMethods li:last-child, #credits li:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
#paymentMethods .expires{
    display: block;
    margin-left: 30px;
}
#viewInvoice h6{
    font-size: initial;
}
#invoice .item{
    display: block;
}
#invoice th:last-child, #invoice td:last-child{
    text-align: right;
}
#invoice td{
    font-size: inherit;
}
.ticket-actions {
    /*
        float: right;
        margin-top: -90px;
    */
    white-space: nowrap;
}
#ticketHead{
    display: flex;
    justify-content: space-between
}
#ticketDetails{
    display: flex;
    margin-top: 20px;
}
#ticketDetails .detail:not(:last-child){
    margin-right: 30px;
    padding-right: 30px;
    border-right: 1px solid #e9edf6;
}
#ticketDetails .title{
    display: block;
    font-weight: bold;
    font-size: small;
}
#ticketReplyContainer{
    margin-top: 30px;
}
#submitAllEPP{
    float: right;
}
#noService{
    text-align: center;
    margin-top: 20px;
}
#noService img {
    width: 100%;
    margin-bottom: 1.5rem;
}
#noService > p{
    margin: 0 auto 20px;
    width: 100%;
    max-width: 500px;
}
#noService #services{
    list-style: none;
    padding-left: 0;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
#noService #services a{
    color: #27283c;
}
#noService #services .service{
    width: 100%;
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border: 1px solid #e9edf6;
    border-radius: 12px;
    padding: 15px 20px;
    text-align: left;
    display: inline-block;
    margin: 10px 0;
    background: #fff;
}
#noService #services .service:hover{
    background: #F4F7FF;
}
#noService #services .service:after{
    content: '\f054';
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    color: #097ffa;
    position: absolute;
    right: 30px;
    margin-top: -40px;
}
#noService #services .service .service-name{
    font-size: 21px;
    font-weight: bold;
}
#noService #services .service p{
    margin-bottom: 0;
}
#noService #services .service i{
    color: #c32126;
}
.site-safe-error{
    margin-bottom: 0;
    overflow-wrap: anywhere;
}
.site-safe-error ul{
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
.site-safe-error ul li:not(:last-child){
    padding-bottom: 10px;
}
#enable2FA img{
    max-width: 250px;
    border: 1px solid #e9edf6;
    padding: 0;
}
.masspay-invoice-detail td {
    font-size: small;
}
#greenHostingBanner{
    background: url(https://whc.ca/wp-content/themes/whc/images/nature.svg) #c2ebff center bottom -22px no-repeat;
    background-size: 100%;
    padding: 20px 0 40px 0;
    text-align: center;
}
#greenHostingBanner #badge {
    width: 130px;
    display: block;
    margin: 0 auto 20px;
}
#greenHostingBanner .btn{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border: 2px solid white;
}
#greenHostingPresentation{
    margin-top: 20px;
    background: url(https://whc.ca/wp-content/themes/whc/images/nature.svg) #c2ebff center bottom -22px no-repeat;
    background-size: 100%;
    padding-bottom: 250px;
}
#gbuc ol li{
    margin-top: 10px;
}
#gbuc ol li::marker {
    font-weight: bold;
}
.badges code{
    font-size: 12px !important;
    margin-bottom: 40px;
    color: white;
    padding: 20px;
    background: #333;
    width: 100%;
    display: block;
    margin: 15px 0 0;
    overflow-wrap: break-word;
    border-radius: 4px;
}
.badges .card img{
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    height: 150px;
}
.green-badges-banner{
    padding: 30px 40px;
    color: white;
    background: #008f42 !important;
    border-radius: 3px;
    margin-bottom: 20px;
}
.green-badges-banner h2{
    font-weight: bold;
    margin: 0;
}
.green-badges-banner .btn.btn-outline-light{
    background: transparent;
    color: white;
    border: 1px solid white;
    margin-top: 10px;
}
.green-badges-banner .btn.btn-outline-light:hover{
    background: white;
    color: #008f42;
    border: 1px solid white;
}
#onboardingProfile, #welcomeBanner{
    color: white;
    padding: 0 15px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(9,127,250,1) 0%, rgba(0,51,191,1) 75%);
    margin-bottom: 15px;
    clear: both;
}
#onboardingProfile h2, #welcomeBanner h2{
    margin: 0 0 10px;
    font-weight: bold;
    font-size: x-large;
}
#onboardingProfile .btn-outline-light, #welcomeBanner .btn-outline-light{
    border: 1px solid white;
    color: white;
    margin-top: 5px;
    background: none;
}
#onboardingProfile .btn-outline-light:hover, #welcomeBanner .btn-outline-light:hover{
    background: white;
    color: #097ffa;
}
#onboardingProfile .notif-text, #welcomeBanner .notif-text{
    padding: 30px 0 30px 40px;
}
#onboardingProfile .row{
    background: url("https://s.whc.ca/img/onboarding-company.svg") no-repeat center right;
    background-size: 50%;
}
#onboardingProfile .close, #welcomeBanner .close{
    position: absolute;
    right: 12px;
    top: 8px;
    color: white;
    text-decoration: none;
}
#welcomeBanner a:not(.btn){
    color: white;
    text-decoration: underline;
}
#welcomeBanner .row{
    background: url(https://s.whc.ca/img/welcomeNCA.svg) no-repeat top right 60px;
    background-size: 40%;
}
.cancellation-modal {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
#request_cancellation_form .cardoption.secondary{
    width: 49.4%;
}
#request_cancellation_form .cardoption i{
    font-size: large;
    margin: 0 10px 0 5px;
}
#request_cancellation_form .cardoption .btn-sm i{
    font-size: medium;
}
#request_cancellation_form h3{
    margin-top: 10px;
}
#request_cancellation_form .cardoption .btn{
    margin-bottom: 5px;
    padding: 15px 10px;
    width: 100%;
    text-align: left;
}
#request_cancellation_form .cardoption{
    width: 100%;
}
#request_cancellation_form .cardoption input{
    display: none;
}
#request_cancellation_form .cardoption input:checked + .btn{
    background: #097ffa;
    color: white;
    border: 1px solid #097ffa;
}
#billingAddress{
    list-style: none;
    padding-left: 0;
}
#billingAddress label{
    width: 100%;
}
#newAddress{
    margin-top: 20px;
}
#wp-create-staging img{
    max-width: 350px;
    margin-bottom: 40px;
}
#wp-create-staging .fa-cog.fa-spin{
    color: #ddd;
    font-size: 84px;
    position: absolute;
    left: calc(50% - 42px);
    margin-top: 40px;
}
#wp-create-staging h2{
    border-bottom: 0;
    margin-bottom: 0;
}
#stagingCreationStates{
    color: #ccc;
    font-size: small;
    text-align: center;margin-bottom: 20px;
}
#stagingCreationStates .current{
    color: #097ffa;
    font-weight: bold;
}
#stagingCreationStates .done{
    color: initial;
}
#createWPStaging .modal-body{
    padding: 40px
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../img/flags@2x.png");
    }
}
.iti {
    width: 100%;
}
.block-hover-pointer {
    cursor: not-allowed !important;
}
@media screen and (max-width : 1400px){
    /*.table td:last-child span {
        display: none;
    }
    .table tbody tr .fa-cog, .table tbody tr .bi-gear-fill {
        display: block;
    }*/
    #greenHostingPresentation {
        background-position: center bottom -18px;
        padding-bottom: 200px;
    }
    #nca_welcome_banner .row{
        background-position: bottom -25px right -50px;
        background-size: 550px;
    }
}
@media screen and (max-width : 1200px){
    #details-page .main-section .domain{
        font-size: 26px;
    }
    #details-page .main-section .domain .product-name{
        font-size: 21px;
    }
    .table td, .table td{
        font-size: 13px;
    }
    #admin-as-client{
        left: 72px;
        width: calc(100% - 72px);
    }
    #content{
        margin-left: 72px;
    }
    .navbar{
        width: calc(100% - 72px);
    }
    .table .dropdown-menu.show{
        position: absolute !important;
    }
    #affiliateStats{
        text-align: center;
    }
    #affiliateStats .fa-stack{
        font-size: 1.5em;
        float: none;
        margin: 0 auto -10px;
    }
    #affiliateStats span:not(.fa-stack){
        display: block;
    }
    #greenHostingPresentation {
        background-position: center bottom -15px;
        padding-bottom: 180px;
    }
}
@media screen and (min-width : 577px) and (max-width : 1200px){
    #sidebar:not(:hover){
        width: 72px;
    }
    #sidebar:not(:hover) #logo{
        display: none;
    }
    #sidebar:not(:hover) #logo-mobile{
        display: block;
        height: 53px;
        width: 53px;
        margin: 20px auto;
    }
    #sidebar:not(:hover) li a {
        padding: 12px;
        text-align: center;
    }
    #sidebar:not(:hover) ul i {
        margin-right: 0;
    }
    #sidebar:not(:hover) .item-name{
        display: none;
    }
    #sidebar:not(:hover) .badge{
        display: none;
    }
    #sidebar:not(:hover) ul li ul{
        display: none;
    }
    #sidebar:not(:hover) .fa-chevron-down{
        display: none;
    }
}
@media screen and (max-width : 991px) { /** MEDIUM **/
    .home-list .domain-name, .home-list .service-domain{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 300px;
    }
    #details-page .main-section{
        flex-direction: column;
    }
    #details-page .main-section .domain-detail{
        width: 100%;
        text-align: center;
    }
    #details-page .main-section .domain .product{
        display: block;
        margin-top: -10px;
    }
    #details-page .main-section .domain .product-name{
        border-left: 0;
        padding-left: 0;
    }
    #details-page .main-section .main-actions {
        align-self: center;
        margin-top: 20px;
    }
    #details-page .main-section .main-actions .btn-cpanel i {
        position: relative;
        bottom: unset;
        right: unset;
        margin-top: -11px;
        display: block;
    }
    #details-page .section, #details-page .infos, #details-page .wordpress-section, .box, .card{
        padding: 20px;
    }
    .table thead tr td:last-child, .table tbody tr td:last-child{
        width: auto;
    }
    .table-domains td:not(:first-child):not(:last-child), .table-domains .secondary-actions {
        display: none !important;
    }
    .table#tableInvoicesList thead, .table#tableSubscriptionsList thead, .table#pending_transfer thead{
        display: none;
    }
    .table#tableInvoicesList tbody th, .table#tableInvoicesList tbody td, .table#pending_transfer tbody td{
        display: block;
        padding-left: 20px !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    .table#tableInvoicesList tbody th:first-child, .table#tableSubscriptionsList tbody td:first-child, .table#tableSubscriptionsList tbody th:first-child, .table#tableSubscriptionsList tbody td:first-child, .table#pending_transfer tbody td:first-child{
        padding-top: 20px !important;
    }
    .table#tableInvoicesList tbody td:nth-last-child(2), .table#tableSubscriptionsList tbody td:nth-last-child(2), .table#pending_transfer tbody td:last-child{
        padding-bottom: 20px !important;
    }
    .table#tableInvoicesList tbody td:last-child, .table#tableSubscriptionsList tbody td:last-child{
        display: table-cell;
    }
    .table#tableSubscriptionsList tbody th, .table#tableSubscriptionsList tbody td{
        display: block;
        padding-left: 20px !important;
    }
    .table#tableSubscriptionsList .service{
        font-size: large;
    }
    .table#tableSubscriptionsList .service ~ .text-muted{
        font-size: 15px;
    }
    .table#tableSubscriptionsList td:nth-child(2){
        padding-top: 10px;
        padding-bottom: 0;
    }
    .table#tableSubscriptionsList td:nth-child(3){
        padding-bottom: 0;
    }
    .table#tableSubscriptionsList td:nth-child(4){
        padding-top: 0;
    }
    .table#pending_transfer .domain_name{
        font-size: large;
        padding-bottom: 10px;
    }
    .table#pending_transfer input{
        margin-top: 10px;
    }
    .table#pending_transfer .btn{
        width: 100%;
    }
    #upgrade .table td:not(:first-child) {
        display: table-cell;
    }
    .table .status.mobile{
        display: inline-block;
    }
    .table td, .table td{
        font-size: 15px;
    }
    .table a.domain-name {
        display: inline-block;
        width: calc(100% - 30px);
    }
    .btn .fa-cog, .btn .bi-gear-fill {
        /*margin-right: 0;*/
        display: block;
    }
    .home-list .quick-shortcuts .btn-outline-secondary{
        display: none;
    }
    #main #page-header{
        flex-direction: column;
    }
    #details-page .whc-panel .item, #details-page .whc-panel:not(.addons) .item:nth-last-child(2) {
        margin-bottom: 20px;
    }
    #details-page .whc-panel .item{
        height: auto;
    }
    #tableSubscriptionsList{
        overflow: auto;
    }
    #ticketDetails{
        flex-wrap: wrap;
    }
    /*
        .ticket-actions {
            float: none;
            margin-top: 20px;
        }
    */
    .table-domains .status{
        background: none !important;
    }
    .table-domains .status i{
        margin-right: 0;
        margin-left: 0;
    }
    .services-list .status{
        margin-left: 5px;
    }
    .services-list .status i{
        margin-right: 5px;
    }
    .services-list .service-line .domain a:after{
        content: '\f054';
        font-family: 'Font Awesome 6 Pro';
        font-style: normal;
        font-weight: 900;
        color: #097ffa;
        right: 0;
        position: absolute;
        margin-top: 0;
        width: 100%;
        text-align: right;
        line-height: 67px;
    }
    .table-domains td:first-child small.text-muted{
        display: none !important;
    }
    .table-domains a.domain-name{
        margin-top: 2px;
    }
    #advancedDnsManager table thead, #privateNameservers table thead, #tableBackorderAuction thead, #ws-tableBackorderAuction thead, #tableBackorderAwaitingDrop thead, #tableAffiliatesList thead, .table-tickets thead tr:last-child{
        display: none;
    }
    #advancedDnsManager table tbody td, #tableBackorderAuction tbody td, #tableBackorderAwaitingDrop tbody td, #tableAffiliatesList tbody td, .table-tickets tbody td, #lastResults table td{
        display: block;
        text-align: right;
    }
    #ws-tableBackorderAuction tbody td{
        display: block;
        text-align: right;
        line-height: 34px;
    }
    #ws-tableBackorderAuction tbody td.domain{
        text-align: left !important;
        padding-left: 10px !important;
        font-size: larger;
        overflow-wrap: anywhere;
    }
    #privateNameservers table tbody td{
        display: block;
    }
    #advancedDnsManager table input{
        text-align: right;
        margin-left: 0 !important;
        display: inline-block;
        width: auto;
    }
    #advancedDnsManager table .form-control-plaintext{
        line-height: 1;
        padding: 0;
        height: auto;
    }
    #advancedDnsManager table td:first-child, #privateNameservers table td:first-child, #archives table th:first-child, #tableBackorderAuction td:first-child, #ws-tableBackorderAuction td:first-child, #tableBackorderAwaitingDrop td:first-child, #tableAffiliatesList td:first-child, .table-tickets td:first-child, #lastResults table td:first-child{
        padding-left: 10px;
    }
    table tbody td[data-title="Domain"], table tbody th[data-title="Domain"]{
        text-align: left !important;
        padding-left: 10px !important;
        font-size: larger;
        overflow-wrap: anywhere;
    }
    table tbody td[data-title="Domain"]:before{
        display: none;
    }
    #update-bids, #tableAffiliatesList .btn, .auction-update-bid{
        width: 100% !important;
    }
    #advancedDnsManager table td:last-child, #privateNameservers table td:last-child, #archives table td:last-child, #tableBackorderAuction td:last-child, #ws-tableBackorderAuction td:last-child, #tableBackorderAwaitingDrop td:last-child{
        width: 100%;
        padding: 10px;
        /*        text-align: left !important;*/
    }
    #archives table tbody tr:nth-of-type(odd), #tableBackorderAuction tbody tr:nth-of-type(odd), #ws-tableBackorderAuction tbody tr:nth-of-type(odd), #lastResults table tbody tr:nth-of-type(odd), #tableBackorderAwaitingDrop tbody tr:nth-of-type(odd), #join-auctions-table tbody tr:nth-of-type(odd){
        background-color: rgba(0,0,0,.05);
    }
    #advancedDnsManager td:before, #archives td:before, #tableBackorderAuction td:before, #ws-tableBackorderAuction td:after, #tableBackorderAwaitingDrop td:before, #tableAffiliatesList td:before, .table-tickets td:before, #lastResults table td:before{
        content: attr(data-title);
        font-weight: bold;
        /*        display: block;*/
        float: left;
        white-space: nowrap;
    }
    #ws-tableBackorderAuction td[data-title="My Max Bid"]:after{
        margin-top: 2px;
    }
    #ws-tableBackorderAuction td[data-title="Status"]{
        text-align: right !important;
    }
    #archives tbody th{
        font-size: larger;
    }
    #emptyListBackorder .btn, .previous-results.box .btn, .archives.box .btn{
        width: 100%;
    }
    #contact-info h6{
        margin-top: 20px;
    }
    #lastResults table thead td:not(:nth-child(2)), #lastResults table thead td label{
        display: none;
    }
    #lastResults table thead select{
        width: 150px;
    }
    /*
        #lastResults table tbody td {
            display: block;
            border-top: 0;
            padding: 0 10px;
        }
    */
    #lastResults table tbody td:first-child{
        padding-left: 10px;
        font-weight: bold;
        padding-top: 10px;
    }
    #lastResults table tbody td:last-child{
        padding-bottom: 10px;
    }
    .services-list .service-line{
        flex-direction: column;
        line-height: 28px;
    }
    .services-list .service-line .secondary-actions, .services-list .service-line .btn-primary{
        display: none;
    }
    .services-list .service-line .secondary-actions, .services-list .service-line .btn-default{
        display: none;
    }
    #greenHostingPresentation {
        background-position: center bottom -12px;
        padding-bottom: 130px;
    }
    .btn-ctr-tablet{
        width: 75%;
    }
    #details-page .whc-panel .item{
        align-items: flex-start;
    }
    #details-page .addons ul li .price-cta{
        align-items: flex-end;
        flex-direction: column;
    }
    #details-page .addons ul li .price-cta .price-addon{
        margin-bottom: 10px;
    }
    #nca_welcome_banner .row{
        background: none;
    }
    #nca_welcome_banner h2, #nca_welcome_banner p{
        max-width: 100%;
    }
}
@media screen and (max-width : 768px) { /** SMALL **/
    .navbar #search-bar{
        display: none;
    }
    .desktop{
        display: none;
    }
    .home-list .domain-name, .home-list .service-domain{
        max-width: 200px;
    }
    .home-list .quick-shortcuts{
        display: none;
    }
    #details-page .main-section .domain-detail{
        margin-top: 10px;
    }
    #details-page .main-section .domain .product-name {
        font-size: 18px;
    }
    #details-page .whc-panel .item{
        height: auto;
        margin-bottom: 20px;
        /* flex-direction: column; */
    }
    #details-page .whc-panel .item .item-details .fa-square{
        font-size: 1.5em;
        margin-top: 10px;
    }
    #details-page .whc-panel .item .item-details .fa-fw{
        font-size: x-large;
        margin-top: 1px;
    }
    #details-page .whc-panel .item .item-details .fa-stack {
        margin-left: -75px;
        margin-top: -10px;
    }
    #details-page .whc-panel:not(.addons) .item:nth-last-child(2) {
        margin-bottom: 10px;
    }
    #details-page .whc-panel.launcher .item .btn, #details-page .whc-panel.addons .item .btn{
        margin-top: 20px;
        width: 100%;
        margin-bottom: 0;
    }
    #details-page .whc-panel .item {
        align-items: center;
    }
    #details-page .whc-panel:not(.launcher):not(.addons) .item .btn {
        border: 0;
        color: transparent;
        position: absolute;
        width: calc(100% - 30px);
        height: 65px;
    }
    #details-page .whc-panel:not(.launcher):not(.addons) .item .btn:hover{
        background: none;
        cursor: pointer !important;
    }
    #details-page .whc-panel:not(.launcher):not(.addons) .item .btn:before {
        color: #097ffa;
        content: '\f054';
        font-family: 'Font Awesome 6 Pro';
        font-style: normal;
        font-weight: 900;
        position: absolute;
        right: 0;
        margin-top: 15px;
    }
    #details-page .whc-panel:not(.launcher):not(.addons) .item .btn:focus{
        box-shadow: none;
        background: none;
    }
    #details-page .whc-panel .item .btn span{
        display: none;
    }
    #details-page .whc-panel .item .btn i{
        display: block;
        width: calc(100% - 30px);
        position: absolute;
        text-align: right;
        line-height: 40px;
        top: 20px;
        right: 15px;
    }
    #details-page .whc-panel .item:first-child .btn i{
        top: 0;
    }
    #details-page .whc-panel .item .item-details{
        width: 100%;
        /* border-top: 1px solid #e9edf6; */
        padding-top: 20px;
        padding-left: 55px;
        padding-right: 20px;
    }
    #details-page .whc-panel.launcher .item .item-details, #details-page .whc-panel.addons .item .item-details{
        padding-right: 0;
    }
    #details-page .whc-panel.addons .item .item-details{
        border-top: 0;
        padding-top: 0;
    }
    #details-page .whc-panel .item:first-child .item-details{
        border-top: 0;
        padding-top: 0;
    }
    #details-page .main-section .domain .dropdown-menu small {
        display: block;
        margin: -10px 0 5px 0;
    }
    #details-page .whc-panel .stat{
        margin-bottom: 15px;
    }
    #ticketDetails{
        flex-direction: column;
    }
    #ticketDetails .detail:not(:last-child){
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9edf6;
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
    }
    #ticketHead{
        flex-direction: column;
    }
    #domain-email-forwarding ul.list li{
        flex-direction: column;
        align-items: flex-start;
    }
    #domain-email-forwarding ul.list li button.text-danger{
        position: absolute;
        right: 30px;
    }
    #domain-email-forwarding ul.list li button.text-warning{
        position: absolute;
        right: 60px;
    }
    #domain-email-forwarding ul.list li i.fa-chevron-right{
        position: absolute;
        margin-top: 30px;
    }
    #domain-email-forwarding ul.list li span{
        width: 100%;
    }
    #domain-email-forwarding ul.list li span:last-of-type{
        padding-left: 20px;
    }
    #domain-main-settings ul.list li{
        align-items: flex-start;
        flex-direction: column;
    }
    #submitUpgrade{
        margin-top: 20px;
    }
    #upgrade .btn-lg.btn-primary{
        width: 100%;
    }
    #affiliateStats .col-md-4{
        margin-bottom: 10px;
    }
    .btn-facebook,.btn-twitter,.btn-linkedin{
        width: 100%;
    }
    .referralLinkActions{
        display: none;
    }
    #most-popular-topic h2{
        text-align: center;
        font-size: x-large;
    }
    #most-popular-topic .btn-outline-primary{
        width: 100%;
        margin-bottom: 10px;
    }
    #most-popular-topic .card{
        margin-bottom: 10px;
        height: calc(100% - 10px);
    }
    .services-list .service-line .domain:before{
        margin-top: 19px;
    }
    .app-widget .quick-shortcuts{
        display: none;
    }
    .apps-widgets .quick-shortcuts .btn-primary{
        display: none;
    }
    #greenHostingPresentation {
        background-position: center bottom -12px;
        padding-bottom: 130px;
    }
    #onboardingProfile .row {
        background-position: top 10px right -90px;
    }
    #onboardingProfile .notif-text{
        padding: 30px 140px 30px 40px;
    }
    #advancedDnsManager .module-header .row-fluid-xs{
        flex-direction: column;
    }
    #advancedDnsManager .module-header .row-fluid-xs .fluid-100{
        width: 100%;
        margin-bottom: 10px;
    }
    .btn-ctr-tablet{
        width: 100%;
    }
    #details-page .whc-panel .moreOptions[data-target="#changeMainDomain"]{
        display: none;
    }
    #details-page .whc-panel.addons .item{
        flex-direction: column;
    }
    #details-page .addons ul li .price-cta{
        margin-left: 0;
        width: 100%;
        align-items: center;
    }
    #details-page .addons ul li .price-cta .price-addon{
        margin: 20px 0 -10px;
    }
}
@media screen and (max-width : 576px) { /** EXTRA SMALL **/
    .mobile{
        display: block;
    }
    #admin-as-client{
        left: 0;
        width: 100%;
    }
    #admin-as-client a{
        display: block;
    }
    body.admin .wrapper{
        margin-top: 47px;
    }
    body.admin #sidebar{
        margin-top: 105px;
    }
    #sidebar{
        display: none;
        z-index: 11;
        margin-top: 70px;
        border-top: 1px solid #8a8ca2;
        box-shadow: none;
        padding-top: 10px;
        width: 100% !important;
    }
    #sidebar #logo, #sidebar #logo-mobile{
        display: none;
    }
    #sidebar .item-name{
        display: inline-block;
    }
    #sidebar .badge{
        display: inline-block;
        float: none;
        margin-left: 10px;
    }
    #sidebar ul i{
        width: 25px;
        margin-right: 10px;
        text-align: center;
    }
    #sidebar li a{
        text-align: left;
        padding: 10px 25px;
    }
    #sidebar #logo-mobile{
        display: none;
    }
    #content{
        margin-left: 0;
    }
    #main {
        margin: 85px auto 25px auto;
        padding: 0;
    }
    .navbar{
        width: 100%;
        background: #27283c;
    }
    .navbar .mobile-only.logo{
        display: block;
        width: 45px;
        position: absolute;
    }
    .navbar .menu-mobile{
        display: inline-block;
        color: white;
    }
    .navbar .menu-mobile.active{
        width: 21px;
        text-align: center;
    }
    .navbar .menu-mobile i{
        color: white;
    }
    .navbar .menu-mobile.active i:before{
        content: "\f00d";
    }
    .navbar ul{
        justify-content: flex-end;
        width: 100%;
    }
    .navbar ul a{
        color: #8a8ca2;
    }
    .navbar .currentPage{
        display: none;
    }
    .navbar .lang{
        display: none;
    }
    .navbar .user strong{
        display: none;
    }
    .navbar .profile-picture{
        margin-right: 0;
    }
    .navbar .fa-chevron-down{
        display: none;
    }
    .navbar #NCA{
        display: none;
    }
    .navbar:after {
        content: 'Beta';
        color: white;
        background: #dc3545;
        display: inline-block;
        padding: 0.25em 0.4em;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        font-size: x-small;
        position: absolute;
        top: 36px;
        border: 1px solid white;
        margin-left: 20px;
    }
    #dashboard-notifs .alert{
        flex-direction: column;
    }
    #dashboard-notifs .alert .btn-xs{
        margin-top: 10px;
    }
    .promo-banner .text {
        padding: 30px 60px;
    }
    .promo-banner p{
        font-size: medium;
    }
    .home-list{
        margin-top: 20px;
    }
    .home-list .list-title{
        font-size: large;
    }
    /*.home-list .list-title i{
        display: none;
    }*/
    .home-list a.manage-all span{
        display: none;
    }
    .home-list a.manage-all:before{
        content: 'All';
    }
    .home-list .service-info-lines {
        margin-top: 0;
        position: relative;
    }
    .home-list ul{
        margin: -15px 0;
    }
    .home-list ul li{
        line-height: 30px;
    }
    .home-list .domain-name, .home-list a.service-domain{
        display: table-cell;
        padding-right: 2em;
    }
    .home-list .domain-name, .home-list .service-domain{
        max-width: 300px;
    }
    .home-list .service-info-lines .service-name{
        line-height: 1;
        padding-bottom: 5px;
    }
    .home-list ul li .mobile.access {
        display: inline-block;
        position: absolute;
        right: 40px;
        text-align: right;
        width: calc(100% - 80px);
    }
    .home-list#hosting ul li .mobile.access{
        margin-top: 10px;
    }
    #register-domain {
        margin-top: 15px;
    }
    #page-header{
        text-align: center !important;
    }
    #page-header .text-right{
        text-align: center !important;
        margin-top: 10px;
    }
    .alert-clickable{
        flex-direction: column;
    }
    .alert-clickable .btn {
        margin: 10px 0 0 0;
        width: 100%;
    }
    h2 small.text-muted{
        display: block;
        margin-left: 36px !important;
    }
    #breadcrumb .text-muted{
        display: block;
        margin-top: 10px;
    }
    #viewInvoice .row .col-lg-6:last-child{
        margin-top: 20px;
    }
    #viewInvoice table{
        margin-top: 20px;
    }
    #paymentMethods li{
        flex-direction: column;
        align-items: flex-start;
    }
    #paymentMethods li .actions {
        margin: 6px 0 0 25px;
    }
    .alert.snackbar{
        top: auto;
        bottom: 10px;
        right: 20px;
        left: 20px;
    }
    .admin .alert.snackbar{
        top: auto;
    }
    #submitAllEPP {
        float: none;
        width: calc(100% - 60px);
        position: fixed;
        margin: 0 30px;
        left: 0;
        bottom: 20px;
        box-shadow: 0 0 200px 100px #fff;
        z-index: 2;
    }
    .table-domains td:not(:first-child){
        display: none;
    }
    .table a.domain-name:after{
        content: '\f054';
        font-family: 'Font Awesome 6 Pro';
        font-style: normal;
        font-weight: 900;
        color: #097ffa;
        right: 35px;
        position: absolute;
        margin-top: 3px;
    }
    #advancedDnsManager .form-row .col-auto button{
        margin-top: 5px;
        width: 100%;
    }
    #affiliateStats{
        text-align: right;
    }
    #affiliateStats .fa-stack {
        float: left;
        margin: 14px 20px 0 0;
        font-size: 2.5em;
    }
    #greenHostingPresentation {
        background-position: center bottom -6px;
        padding-bottom: 90px;
    }
    #onboardingProfile .notif-text {
        padding: 20px 30px;
    }
    #onboardingProfile .row {
        background: none;
    }
    #onboardingProfile .close{
        top: -228px;
    }
}
@media screen and (max-height : 750px) {
    #sidebar li a {
        padding: 5px 30px;
    }
}
@media screen and (max-height : 620px) {
    #sidebar #secondary-menu{
        position: relative;
        bottom: 0;
    }
}
#noResults:hover{
    background: white;
}
#noResults td{
    text-align: center;
    padding: 40px 0;
}
#noResults i.fa-magnifying-glass{
    display: block;
    color: #c32126;
    font-size: xx-large;
    margin-bottom: 10px;
}
#noResults span.h5{
    font-weight: bold;
}
#noResults p{
    margin-bottom: 15px;
    line-height: normal;
}
.noResultsTr div, .noResultsDiv div{
    text-align: center;
    padding: 3%;
}
.red-color{
    color: #c32126;
}
.price .renewal .oldprice{
    text-decoration: line-through;
}

.aismodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.aismodal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 35% !important; /* Could be more or less, depending on screen size */
    position: fixed !important;
    left: 50% !important;
    margin-left: -17.5% !important;
    border-radius: 15px;
}
#details-page .section, #details-page .infos, #details-page .wordpress-section, .box, .card{
    box-shadow: 0 2px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
    border-radius: 12px;
    background: white;
    padding: 30px;
    margin-bottom: 30px;
    /* height: calc(100% - 30px); */
}
.aismodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.aismodal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 35% !important; /* Could be more or less, depending on screen size */
    position: fixed !important;
    left: 50% !important;
    margin-left: -17.5% !important;
    border-radius: 15px;
}

.box .link-item:hover{
    cursor:pointer;
    color: #097ffa !important;
}
.btn-floating {
    position: fixed;
    right: 0;
    bottom: 20px;
    border: 0;
    color: white;
    border-radius: 44px 0 0 44px;
}
@media screen and (max-width : 1800px){
    .btn-floating > span{
        display: inline-block;
        opacity: 0;
        width: 0;
    }
    .btn-floating:hover > span{
        opacity: 1;
        width: auto;
    }
}

.box .link-item:hover{
    cursor:pointer;
    color: #097ffa !important;
}

@media screen and (max-width : 400px) {
    .home-list .domain-name, .home-list .service-domain{
        max-width: 200px;
    }
}
@media print {
    /* hide main components */
    #sidebar, #navbar, #bugTracker, #admin-as-client{
        display: none;
    }
    /* Invoice */
    #billing_view {
        display: none;
    }
    #viewInvoice .modal-footer, #viewInvoice .modal-header .close{
        display: none;
    }
    #viewInvoice .modal-dialog {
        max-width: 100%;
    }
}

/* New CSS classes created for Design System */

.page-panel {
    display: block;
    background: #fff;
    border-radius: .75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 .125rem .125rem rgba(#000, .1);
    font-size: .75rem;
    color: #8A8CA2;
}

.page-panel .section-icon {
    display: block;
    height: 1.25rem;
    width:1.25rem;
    float: left;
    margin: 0 1rem 0 0;
    color: #C52127;
    font-size: 1.25rem;
    line-height: 1;
}

.page-panel .section-title {
    border-bottom: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #000000;
}

.page-panel h3 {
    color: #000000;
    font-size: 1rem;
    line-height: 1.25rem;
    margin-bottom: 0;
    font-weight: bold;
}

.page-panel .details {
    color: #000000;
}

.page-panel .price-cta {
    text-align: right;
}
.page-panel .price-cta .price-block {
    display: inline-block;
    margin: 0 1rem 0 0;
}
.page-panel .price-cta .price {
    color: #C52127;
    font-size: 1.125rem;
    font-weight: bold;
}
.page-panel .click-option {
    display: block;
    border-radius: .25rem;
    border: 1px solid #8A8CA2;
    transition: all .3s ease-in-out;
    padding: .75rem 1rem;
    color: #8A8CA2;
    text-decoration: none;
    overflow:hidden;
}
.page-panel .click-option .label {
    display: block;
    float: left;
}
.page-panel .click-option .cta {
    padding: .5rem .75rem;
    border-radius: .25rem;
    border: 1px solid #8A8CA2;
    display: block;
    float: right;
    transition: all .3s ease-in-out;
}

.page-panel .click-option:hover {
    border-color: #097FFA;
}

.page-panel .click-option:hover .cta {
    background: #097FFA;
    color: #fff;
    border-color: #097FFA;
}

.page-panel .click-option p {
    margin:0;
}

.inline-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inline-checklist .fa-circle-check {
    color: #28A745;
}

.inline-checklist li {
    display: inline-block;
    margin: 0 .5rem .5rem 0;
}

.button {
    display: inline-block;
    background: #097FFA;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    padding: .75rem 1rem;
    border-radius: .25rem;
    border: 1px solid #097FFA;
    transition: all .25s ease-in-out;
}

.button:hover {
    background: #0069d9;
    border-color: #0062cc;
    color: #ffffff;
}
.progress-group p {
    margin:0;
}

.progress-group .progress-infos {
    float: left;
}
.progress-group .progress-bar-container {
    float: left;
    margin-right: 1rem;
    width: 3.25rem;
    height: 3.25rem;
    position: relative;
}
.progress-group .progress-bar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 65%, transparent 66% 100%), conic-gradient(#097ffa 33%, #e9ecef 0);
    position: absolute;
    top:0;
    left: 1rem;
}

.progress-group .progress-bar.warning {
    background: radial-gradient(closest-side, white 74%, transparent 75% 100%), conic-gradient(#ffc107 83%, #e9ecef 0);
}

.badge-success.pale {
    background: #d4edda;
    color: #8A8CA2;
}

.badge-success.pale .fa-circle-check {
    color: #28a745;
}

.badge-warning.pale {
    background: #fff3cd;
    color: #8A8CA2;
}

.badge-warning.pale .fa-triangle-exclamation {
    color: #ffc107;
}

.badge-danger.pale {
    background: #fbeaec;
    color: #8A8CA2;
}

.badge-danger.pale .fa-circle-exclamation {
    color: #dc3545;
}
/* END Design System Classes */

.graph_history.btn-group-sm .btn {
    font-size: 11px;
}
.btn-light-grey {
    background: #e9edf6;
}
.btn-light-grey:hover {
    background: #d0d4db;
}

#percent-memory, #percent-cpu, #percent-disk {
    padding: 0 !important;
    margin: -10px 0 0 -60px !important;
    position: absolute;
}
#percent-memory .apexcharts-canvas, #percent-cpu .apexcharts-canvas, #percent-disk .apexcharts-canvas {
    width: 80px !important;
}


.auctions-nav .nav-item .nav-link.active {
    background: rgba(9, 127,250, .15);
    border-radius: 2rem;
}

.table-filters .collapse-body {
    padding: 1.25rem;

    border-radius: 0.5rem;

    margin-top: 1rem;
    margin-bottom: .5rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, .15);

}

.table-filters .collapse-body input[type=text], .table-filters .collapse-body input[type=number] {
    margin-bottom: .25rem;
    border: 1px solid #C7CED5;
    border-radius: .25rem;
    width: 100%;
    padding: .5rem;
}

.auctions-nav .nav-link {
    color: #232536;
}

.red-hot {
    color: #BD1E23;
}

.cart-panel {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 250px;
    right: 0;
    background: #fff;
    z-index: 1000;
    overflow: hidden;
    padding: 1rem 2.25rem;
    box-shadow: 0 -2px 2px rgb(0 0 0 / 6%), 0 -2px 8px rgb(0 0 0 / 4%);
}
#join-auctions-table .btn-primary[data-action="bid"]{
    min-width: 110px;
}
#join-auctions-table .btn[data-action="cart"], #join-auctions-table .btn[data-action="cart add"]{
    min-width: 36px;
}
#join-auctions-table thead td:last-child{
    width: 185px;
}
#join-auctions-table td{
    vertical-align: middle;
}
#ws-tableBackorderAuction td.domain, #join-auctions-table td[data-title="Domain"]{
    overflow-wrap: break-word;
}
#join_auctions_confirm_list li strong, #join_auctions_confirm_list li .domain{
    overflow-wrap: break-word;
}

@media screen and (max-width: 1200px) {
    .cart-panel {
        left: 72px;
    }
}

.cart-panel .cart-info {
    display: block;
    float: left;
    line-height: 2.375rem;
}

.cart-panel .cart-details .cart-amount {
    float: left;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2.25rem;
}

.cart-panel .cart-panel {
    font-size: .75rem;
}

.cart-panel .view-cart-bt {
    display: block;
}

.cart-panel .cart-details {
    display: block;
    float: right;
}

@media screen and (max-width: 576px) {
    .cart-panel {
        left: 0px;
    }

    .cart-panel .cart-info {
        float: none;
        text-align: center;
    }

    .cart-panel .cart-details {
        float: none;
        text-align: center;
    }

    .cart-panel .cart-details .cart-amount {
        display: inline-block;
        float: none;
    }

    .domain-auction-table tr, #join_auctions_table_body tr {
        border-top: 1px solid #dee2e6;
    }

    .domain-auction-table td{
        border-top: 0;
    }

    .domain-auction-table tbody tr td:last-child {
        padding-right: 10px;
    }
    #join-auctions-table .btn-primary[data-action="bid"], #join-auctions-table .btn-outline-primary[data-action="cart"], #join-auctions-table .btn-outline-primary[data-action="cart add"]{
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }
}

.badge-pill.white {
    background: transparent;
    border: 1px solid #6C757D;
    font-weight: normal;
    color: #6C757D;
}

.boxed-list {
    list-style: none;
    margin:0;
    padding:0;
    border: 1px solid #DFDFDF;
    border-radius: .5rem;
}

.boxed-list li {
    display: block;
    margin:0;
    padding: 1rem 1.25rem;
    border-top: 1px solid #DFDFDF;
}

.boxed-list li:first-child {
    border: 0;
}

.boxed-list h3 {
    font-size: 1rem;
    margin: 0 0 .5rem;
    padding: 0;
}

.boxed-list p {
    display:block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.boxed-list small {
    font-size: 13px;
}

.boxed-list p .aligned-left {
    float: left;
    display: block;
}

.boxed-list p .aligned-right {
    float: right;
    display: block;
}

.boxed-list .total {
    line-height: 1.5rem;
}

.boxed-list .total .bold {
    font-weight: bold;
    font-size: 1.5rem;
}

.boxed-list .color-red {
    color: #c32126;
}

.boxed-list .thrashcan {
    display: inline-block;
    color: #BABABF;
    text-decoration: none;
    font-size: small;
}

.boxed-list .thrashcan:hover {
    color: #c32126;
}

.auction-modal .modal-backdrop {
    background: #000;
    opacity:0.5 !important;
}

.auction-modal .modal-header {
    display: block;
}

.auction-modal .modal-header .topicon-circle {
    display: block;
    margin: 0 auto 1rem;
    width: 5rem;
    height: 5rem;
    background: rgba(9, 127, 250, .1);
    border-radius: 5rem;
}

.auction-modal .modal-header h2 {
    text-align: center;
    font-size: 21px;
    margin: 0;
    padding: 0.5rem 0 0 0;
}

.auction-modal h3 {
    font-size: 16px;
}

.auction-modal .topicon-circle i {
    font-size: 2rem;
    color: #097FFA;
    text-align: center;
    display: block;
    line-height: 5rem;
}

.callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: #055160
    background-color: #cff4fc;
    border-left: #9eeaf9;
}

.credit-card-modal .exp {
    display:inline-block;
    padding: 0 .25rem;
    border-radius: .25rem;
    background: #707070;
    color: #fff;
    font-weight: bold;
    font-size: .75rem;
}

.credit-card-modal .alert-info {
    padding: 20px;
}
.credit-card-modal .alert-info:before {
    display:none;
}

.credit-card-modal .arrow-back {
    position: absolute; color:#6C757D;
}

.credit-card-modal input[type=text] {
    width:100%;
    border: 1px solid #C7CED5;
    padding: .5rem;
    border-radius: .25rem;
}

.domain-auction-table .cart-btn {
    min-width: 2.25rem;
    text-align: center;
}

@media (min-width: 576px) {
    .modal-small {
        max-width: 23rem;
    }
}

.custom-number-input {
    /* Hide the number input arrows */
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
}

.custom-number-input::-webkit-inner-spin-button,
.custom-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
#join_auction_payment_modal input{
    margin-bottom: 0.5rem;
}
.formElem {
    position: relative;
}

.formElem input[type=text] {
    padding-left: 2.25rem;
}

.formElem .formelem-icon {
    position: absolute;
    top: 13px;
    left: 12px;
}