html, body
{
    background: #ffffff;
    color: #00245E;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

/* Typography */

.material-icons
{
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

h1, h3
{
    font-weight: 500;
    margin: 0;
}

h1, h3
{
    font-size: 1.25rem;
}

/* Links */

a
{
    text-decoration: none;
    font-weight: 500;
}

a[data-toggle="collapse"]
{
    position: relative;
}

a#navbarDropdownMenuLink
{
    background: #f1f1f1;
    color: #00245E;
}

.link
{
    font-weight: normal;
    text-decoration: underline;
}

.cancel-link
{
    display: block;
    border-bottom: 2px solid;
    height: fit-content;
    padding: 0.5rem 0;
}

/* Sidenav */

#sidenav
{
    width: 250px !important;
}

#sidenav-header
{
    margin-bottom: .5rem;
    height: 4.5rem;
}

#sidenav-logo
{
    height: 1.75rem;
}

#sidenav .material-symbols-outlined
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: .75rem;
}

.accent-color
{
    color: #1266f1;
}

.sidenav-link
{
    font-size: 1rem;
    margin: .5rem .75rem;
    padding: 0;
    height: 3rem;
}

.sidenav-collapse .sidenav-link
{
    font-weight: normal;
    font-size: 1rem;
    padding: 1.25rem 3rem;
}

.hr
{
    color: #aaa;
}


/* Buttons */

.btn
{
    text-transform: none;
}

.form-buttons-wrapper
{
    display: flex;
    justify-content: space-between;
    align-content: center;

    width: 100%;
}

.btn_button
{
    display: block;
    border-radius: 50px;
    font-size: 1rem;
    text-transform: none;
    height: 3.5rem;
    width: fit-content;
}

.va_flex_menu
{
    height: 30px;

}
.vea_btn_radio
{
    display: flex;
    font-size: 1rem;
    text-transform: none;
    justify-content: center;
    align-items: center;
    width: 70px;
}

.icon-btn-40,
.icon-btn-56
{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
}
.icon-btn-30
{
    width: 2.0rem;
    height: 2.0rem;
}

.icon-btn-40
{
    width: 2.5rem;
    height: 2.5rem;
}

.icon-btn-56
{
    width: 3.5rem;
    height: 3.5rem;
}


/* Layout */

.section
{
    padding: 2rem 0;
}

.navbar
{
    padding: 1rem;
}

.navbar .d-flex
{
    gap: 1rem;
}

#sidenavCollapse
{
    background: #f3f1e9;
    color: #00245E;
}

.wrapper
{
    display: flex;
    align-items: stretch;

    width: 100%;
}

#content
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    width: 100%;
    padding: 1rem;
    transition: all 0.3s;  
}

#add-first-device-card
{
    background: #f3f1e9;
    box-shadow: none;
    align-items: center;
}

.actionbar
{
    display: flex;
    justify-content: end;

    width: 100%;
}

.card,
.device-details
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card
{
    padding: 2rem 2rem 2.5rem;
}

.device-card-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row
{
    --mdb-gutter-x: 0;
    margin: 0;
    gap: 1rem;
}

form .row
{
    gap: .5rem;
}

/* Smaller screens */

.flex-column-gap-1
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



/* Forms (replaces form.css) */ 

.form-label,
.form-control,
.form-control:focus,
.form-control:active,
i
{
    color: #00245E;
}

.form-elm
{
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.form-label, .form-control
{
    margin: 0;
}

.form-label
{
    font-weight: 500;
}

.form-control
{
    border-radius: .5rem;
    height: 2.5rem;
}

.form-outline .form-control~.form-notch .form-notch-leading
{
    border-radius: 0.5rem 0 0 0.5rem;
}
.form-outline .form-control~.form-notch .form-notch-trailing
{
    border-radius: 0 0.5rem 0.5rem 0;
}

.form-control[type='date'],
.form-control[type='time']
{
    width: fit-content;
}

.opt-field
{
	display: flex;
	gap: .5rem;
}

.opt-field input
{
	width: 3rem;
	height: 4rem;
	padding: .75rem;
	text-align: center;
	font-size: 2rem;
	font-weight: medium;
}

.btn-lg
{
    height: 3rem;
}

legend
{
    font-size: 1rem;
    font-weight: 500;
}

fieldset
{
    margin: 0 0 1rem;
}

.form-elm,
.form-check
{
    margin-bottom: .5rem;
}

.form-check-input
{
    padding: 0;
}

/*  */

.modal-body 
{
    min-height: 500px;
}

.form-control[type="number"]
{
    width: 3.5rem;
}

/* Modal form */

.modal form
{
    display: contents;
}