span.brand-text.font-weight-light {
    font-size: 1rem;
}

.content {
    min-height: 80vh;
}

span.float-right {
    float: right !important;
}


.max-height-300 pre {
    max-height: 300px
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px
}

.theme-switch input {
    display: none
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 400ms
}

.slider::before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: 400ms;
    width: 16px
}

input:checked+.slider {
    background-color: #66bb6a
}

input:checked+.slider::before {
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px
}

.slider.round::before {
    border-radius: 50%
}


.dark-mode .navbar-white {
    background-color: #343a40 !important;
    color: #1f2d3d;
}

.dark-mode #msform fieldset {
    background: #343a40 !important;
    color: #ced4da;
}

body.dark-mode.my-custom-form {
    background: #343a40 !important;
    color: #ced4da;
}

body.dark-mode>ul#progressbar>li {
    color: #ced4da !important;
}




/* new css  */

.login-box, .register-box {
    width: 688px;
}

.login-box div.card-header {
    background: linear-gradient(to right, #2c73d2 20%, #fbeaff 100%);
    border-radius: 10px 10px 0 0; /* match card corners */
    color: #333;
    font-weight: bold;

}

.login-box div.card-header a {
    color: #fff;
    pointer-events: none;

}

.login-card-body,
.register-card-body {
    background-color: #fff;
    border-top: 0;
    color: #666;
    border: 1px solid #343a4094;
    padding: 20px;
}

.login-page,
.register-page {
    background-color: #b2d7f442;
}



.card {
    border-radius: 10px; /* smooth corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* raised effect */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px); /* lift on hover */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}


.login-card-body {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    padding: 20px;
}





.layout-fixed .main-sidebar {
    background-color: #343a40;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary a.brand-link {
    background-color: #343a40 !important;
    border-color: #eff9f02e;
}

.user-panel,
.user-panel {
    border-color: #eff9f02e !important;
}

.nav-sidebar>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}



.slider {
    background-color: #343a40;
    border: 1px solid #fff;
}

.navbar-light option {
    background-color: #343a40;
    color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.content-wrapper {
    background-color: #EFF9F0;
}

.content-header {
    padding: 10px 0.5rem;
}

.content-header .row {
    margin: 0 !important;
}

.nav-treeview>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.bb-1px {
    border-bottom: 1px solid #ced4da !important;
}

.bt-1px {
    border-top: 1px solid #ced4da !important;
}

.sec-active {
    border-radius: 0px !important;
    background-color: #343a40;
    color: #fff !important;
}

.customSidebar {
    height: 100% !important;
}

.customSidebar>.sidebar {
    max-height: fit-content !important;
}





.btn-mycustom {
    background-color: #343a40 !important;
    color: #fff !important;
}

.btn-mycustom:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}
.btn-mycustomOpps {
    background-color: #343a40 !important;
    color: #fff !important;
}

.btn-mycustomOpps:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}

.login-card-body .btn-block{
    background: #343a40;
    border-color: #343a40;
}


.ck.ck-editor {
    width: 100% !important;
}
.input-group-editor{
    flex-wrap: nowrap !important;
}

@media (max-width: 991.98px) {
    .input-group-editor{
        flex-wrap: wrap !important;
    }
}

.dd3-content {
    border: 1px solid #d8dbe0;
    /* margin-bottom: 5px; */
}

.dd-item .content-right {
    float: right;
}

.dd-item>button:before {
    top: 7px;
}
.ground-to-water{
    background-color: #77d3d4;
}
.opening-to-ground{
    background-color: #81baf3;

}
.circle-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #4d7eb1;
}