html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}
table::before{
    content:""!important;
}

body {
  margin-bottom: 60px;
}

.c-wrapper {
    background-color: rgb(255 255 255);
    width: min(400px, 80vw);
    padding: 30px;
}

    .c-wrapper .c-icon > i {
        font-size: 6rem;
        color: rgb(0 150 136);
    }

    .c-wrapper .c-row {
        display: flex;
        flex-direction: column;
        gap: 7px;
        justify-content: center;
        align-items: center;
        margin-block: 10px;
    }

        .c-wrapper .c-row > .btn {
            width: fit-content;
            color: rgb(0 150 136);
            border: 1px solid rgb(0 150 136);
        }

            .c-wrapper .c-row > .btn:hover,
            .c-wrapper .c-row > .btn:first-child {
                background-color: rgb(0 150 136);
                color: rgb(255 255 255);
            }

                .c-wrapper .c-row > .btn:first-child:hover {
                    background-color: rgb(0 124 112);
                }


.serv-box {
    padding: 10px;
    margin-block: 10px !important;
    border: 1px solid rgb(212 216 221);
    border-radius: 10px;
    width: 100%;
}

.dark-style .serv-box {
    border-color: rgb(84 105 144);
}


.task-state-container {
    position: relative;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    border: 1px solid rgb(212 216 221);
}

.dark-style .task-state-container {
    border-color: rgb(84 105 144);
}

.task-state-container .task-state {
    width: 6px;
    height: 6px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-radius: 50%;
}

    .task-state-container .task-state.new-task {
        background-color: rgb(9 199 40);
    }

    .task-state-container .task-state.read-task {
        background-color: rgb(253 11 103);
    }