@charset "UTF-8";


:root {
    --page-background: #fcfcfc;
    --done-color: #dc8db7;
    --active-color: #935977;
    /*--logo-second-color : #f29401;*/
    --logo-second-color: orange;
    --primary-dark: #593196;
    --blue: #2196F3;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e51c23;
    --orange: #fd7e14;
    --yellow: #ff9800;
    --green: #4CAF50;
    --teal: #20c997;
    --cyan: #9C27B0;
    --white: #fff;
    --gray: #666;
    --gray-dark: #222;
    --primary: #17141F;
    --secondary: #fff;
    --success: #4CAF50;
    --info: #9C27B0;
    --warning: #ff9800;
    --danger: #e51c23;
    --light: #fff;
    --dark: #222;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--page-background) !important;
}

.user_card {
    height: 400px;
    width: 350px;
    margin-top: auto;
    margin-bottom: auto;
    background: var(--primary-dark);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;

}

.brand_logo_container {
    position: absolute;
    height: 170px;
    width: 170px;
    top: -75px;
    border-radius: 50%;
    background: var(--page-background);
    padding: 10px;
    text-align: center;
}

.brand_logo {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 2px solid white;
}

.form_container {
    margin-top: 100px;
}

.login_btn {
    width: 100%;
    background: var(--primary) !important;
    color: white !important;
}

.login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.login_container {
    padding: 0 2rem;
}

.input-group-text {
    background: var(--primary) !important;
    color: white !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary) !important;
}
#logo-img{
    background: azure;
}