body{
	background:linear-gradient(135deg,#0d6efd,#20c997);
	font-family:Segoe UI;
}

.card{
	backdrop-filter:blur(5px);
}

label{
	font-weight:600;
}

.form-control{
	height:48px;
}

.input-group-text{
	width:48px;
	justify-content:center;
}

.btn{
	height:48px;
	font-weight:bold;
}

/* =========================================
   SIDEBAR MOBILE
========================================= */

.sidebar-toggle {
    display: none;

    border: none;

    background: transparent;

    font-size: 22px;

    cursor: pointer;
}


/* =========================================
   DESKTOP
========================================= */

.sidebar {
    width: 250px;

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    z-index: 1000;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .sidebar-toggle {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 40px;

        height: 40px;
    }


    .sidebar {

        left: -260px;

        width: 250px;

        transition:
            left 0.3s ease;

        box-shadow:
            2px 0 10px
            rgba(0,0,0,0.2);

    }


    .sidebar.show {

        left: 0;

    }


    .top-navbar {

        margin-left: 0 !important;

        width: 100%;

    }


    .main-content {

        margin-left: 0 !important;

        width: 100%;

    }

}