.table th, .table td {
    padding: 0.98rem;
}

tr td {
    font-weight: bold;
    color: #374151;
}

.green {
    color: #a1d97a;
}

td p {
    align-items: center;
    align-content: center;
}





/* Notifications Settings Style For Toggle Button */

.toggle-path {
    transition: background 0.3s ease-in-out;
}
.toggle-circle {
    top: 0.2rem;
    left: 0.25rem;
    transition: all 0.3s ease-in-out;
}
input:checked ~ .toggle-circle {
    transform: translateX(100%);
}
input:checked ~ .toggle-path {
    background-color:#81E6D9;
}

.notifications-container {
    width: 100%;
    /*font-family: 'Noto Kufi Arabic', sans-serif;*/
    font-family: system-ui, Sans-Serif, sans-serif, Arial, Verdana, "Trebuchet MS";
    font-weight: 500;
    color: #4b5563;
}



.notifications {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.general-notification, .signal-notification {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    margin-top: 50px;
}

.signal-notification {
    margin-bottom: 40px;
}

.signal-notification {
    padding-bottom: 60px;
}

.real-time-notifications {
    margin-left: 38px;
    margin-top: 26px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    color: #4b5563;
}

.notification-tooltip {
    max-width: 100%;
    height: 22px;
    width: 22px;
    margin-top: 23px;
    margin-left: 10px;
}


/* General and signals switch styles */
.custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 2.5rem;
    pointer-events: all;
    border-radius: 0.9rem;

}

.custom-switch {
    margin-bottom: 40px;
}

.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1.25rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.custom-switch .custom-control-label::after {
    /*top: calc(0.25rem);*/
    left: calc(-2.25rem + 2px);
    width: calc(1rem);
    height: calc(1rem);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(0.75rem);
    transform: translateX(1.2rem);
}


/* Styles for the Enable Disable Buttons */
.slow .toggle-group {
    transition: left 0.7s; -webkit-transition: left 0.7s;
}



/* For Mobile Design */

@media only screen
and (min-device-width : 400px)
and (max-device-width : 800px)
{
    .general-notification, .signal-notifications {
        display: flex;
        flex-direction: column;
        margin-left: 50px;
        margin-top: 50px;
    }

    .custom-switch {
        margin-top: 10px;
        margin-bottom: 40px;
    }

    .signal-notification {
        padding-bottom: 60px;
    }

    .save-settings {
        margin-bottom: 50px;
    }
}





/* Tooltips */

.custom-tooltip {
    visibility: hidden;
    background: #000000;
    color: rgb(255 255 255);
    width: 130px;
    height: 30px;
    font-size: 12px;
    border: none;
    border-radius: 20px;
    text-align: center;
    align-items: center;
    padding-top: 4px;
    text-decoration: none;
}





/*.tooltip*/
/*{*/
/*    display: inline;*/
/*    position: relative;*/
/*    text-decoration: none;*/
/*    top: 0px;*/
/*    left: 4px;*/
/*}*/
/*.tooltip:hover:after*/
/*{*/
/*    background: #333;*/
/*    background: rgba(0,0,0,.8);*/
/*    border-radius: 5px;*/
/*    top: -5px;*/
/*    color: #fff;*/
/*    content: attr(alt);*/
/*    left: 160px;*/
/*    padding: 5px 15px;*/
/*    position: absolute;*/
/*    z-index: 98;*/
/*    width: 150px;*/
/*}*/
/*.tooltip:hover:before*/
/*{*/
/*    border: solid;*/
/*    border-color: transparent black;*/
/*    border-width: 6px 6px 6px 0;*/
/*    bottom: 20px;*/
/*    content: "";*/
/*    left: 155px;*/
/*    position: absolute;*/
/*    z-index: 99;*/
/*    top: 3px;*/
/*}  */