body{
    color: #000;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
}
.no-border-radius{
    border-radius: 0;
}
.bg-primary{
    background-color: #ECEDF6 !important;
    background-size: cover;
}
.max-width-500
{
    max-width: 500px;
}
.max-width-930
{
    max-width: 930px;
}
#wrapper #content-wrapper {
    background-color: #ECEDF6;
}
.bg-topbar{
    background-color: #ECEDF6;
    border-bottom: 2px solid #a8a5b4;
}
form.user .form-control-user{
    background: #F3F2F6;
    border-radius: 0;
    border: 0;
}
form.user .btn-user{
    border-radius: 0;
}
.btn{
border-radius: 0;
}
.btn-primary {
    color: #fff;
    background-color: #262626;
    border: 0;
     text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.btn-primary:hover {
    color: #fff;
    background-color: #262626;
    border-color: #262626;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #262626;
    border-color: #262626;
}
a {
    color: #8D8D8D;
 }
a:hover {
    color: #8D8D8D;
    text-decoration: underline;
}
.custom-checkbox .custom-control-label::before {
    border-radius: 0;
    background: #F3F2F6;
    border: 0;
}
.card {
    border-radius: 0;
}
.bg-navbar{
    background-color: #F9F9FF !important;
}
.nav-item.active .nav-link svg line {
    stroke: #000;
}
.nav-item.active .nav-link svg path {
    stroke: #000;
}
.nav-item.active .nav-link svg rect {
    stroke: #000;
}

.nav-item:hover .nav-link svg line {
    stroke: #000;
}
.nav-item:hover .nav-link svg rect {
    stroke: #000;
}
.nav-item:hover .nav-link svg path {
    stroke: #000;
}

.navbar-nav > .active{
    background-color: #ecedf6;
}

.avatar {
    background: #262626;
}
.sidebar-brand-icon img{
    width: 100%;
    height: 100%;
    padding: 20%;
}
btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #262626;
    border-color: #262626;
    box-shadow: none;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}


.table td, .table th {
    border-top: 0;
}
.alert {
    border-radius: 0;
}
.text-primary{
    color: #262626 !important;
    font-size: 1rem;
}
.sidebar{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
    width: 6.5rem!important;
}
.sidebar-brand
{
    border-bottom: 2px solid #A8A5B4;
}
.dropdown-menu {
    border-radius: 0;
}
.content{
    background: #ECEDF6;
}
.sidebar-dark hr.sidebar-divider {
    border-top: 2px solid #A8A5B4;
}
.sidebar hr.sidebar-divider {
    margin: 0;
}
.nav-link svg{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.form-control{
    background: #F3F2F6;
    border-radius: 0;
    border-color: #F3F2F6;
    color: #999
}
.form-control:focus{
    background: #F3F2F6;
    border-radius: 0;
    border-color: #262626;
    color: #000;
}
label{
    color: #000;
    font-size: 1rem;
    font-weight: 600;
}
h3{
    text-transform: uppercase;
}
.fc-view-harness{
    background: #f9f9ff;
}

.nav-item{
    opacity: 0.5;
}
.nav-item:hover{
    opacity: 1;
}
.nav-item.active{
    opacity: 1;
}

.fc .fc-button{
    color: #fff;
    background-color: #262626;
    border: 0;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.fc-daygrid-event {
    border-radius: 0;
}
.icon-container {
    display: flex;
    align-items: center;
    justify-content: start;
}

.icon-link, .btn-icon {
    margin-right: 20px; /* Adjust spacing between icons */
    border: none;
    background: none;
}

.icon-link i, .btn-icon i {
    font-size: 20px; /* Adjust icon size */
    color: #000000; /* Adjust icon color */
}
#showHelp{
    cursor: pointer;
    color: #000000;
}
#project_trackImage_raw_preview img{
    width: 220px;
}
#project_image_preview video{
    width: 220px;
}
#project_image_previewView img{
    width: 100%;
}

.phone {
    width: 240px;
    height: 480px;
    background-color: #333;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.phone-screen {
    width: 100%;
    height: 90%;
    background-color: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}
#phoneContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}
#style_introTitle{
    width: 185px;
    font-size: 20px;
    text-align: center;
}

#style_introText{
    width: 185px;
    font-size: 16px;
    text-align: center;
}

#style_introButton {
    margin-top: 25px;
    display: inline-block; /* Make it inline-block to size it according to its content */
    background-color: #000; /* Button color */
    color: white; /* Text color */
    padding: 10px 20px; /* Top and bottom padding, left and right padding */
    font-size: 15px; /* Text size */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to indicate it's clickable */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline from links if you use <a> instead of <div> */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

#style_introButton:hover, #style_introButton:focus {
    background-color: #0e0b0b; /* Darker shade for hover state */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow to lift the button */
    outline: none; /* Remove outline for focus state */
}

.phone-statusbar {
    width: 100%;
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statusbar-time {
    font-size: 14px;
}

.statusbar-icons {
    display: flex;
}

.icon-signal, .icon-wifi, .icon-battery {
    width: 20px;
    height: 20px;
    background-size: cover;
    margin-left: 4px;
}

/* Example icons using simple shapes */
.icon-signal {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 16h2v4H4v-4zm3-3h2v7H7v-7zm3-3h2v10h-2V10zm3-3h2v13h-2V7z"/></svg>');
}

.icon-wifi {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 6c-3.31 0-6.31 1.34-8.48 3.5L12 18l8.48-8.5C18.31 7.34 15.31 6 12 6z"/></svg>');
}

.icon-battery {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M17 6.5V6a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v.5H5v11h14v-11h-2zm-1.5 0h-7V6h7v.5z"/></svg>');
}

.phone-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    margin-top: 20px;
}
.backNextButtons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}