/***** Global Settings *****/
* {	vertical-align: baseline;font-size:100%;outline:none;padding:0;margin:0;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,* focus {outline:none;margin:0;padding:0}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

html {height:100%}
body {height:100%;width:100%;min-width: 240px;background-color:#fff;font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;font-size: 81.25%;font-weight: normal;text-align:left;color:#888;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}
body {overflow-y:scroll}
div {margin:0 auto;width:100%;padding:0;background:none}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%}

.table {display:table;}
.table-row {display:table-row;}
.table-cell {display:table-cell;}

.container {width:100%;min-width:420px;height:100%;}
.header {height:100px}
.body {height:100%;}
.footer-section {height:30px}

.align-middle{vertical-align:middle}
.align-left{text-align:left !important}

.login{
	background-image: url(../images/undraw_medicine_b1ol.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}

.title, .footer-txt{padding:0 4%;}
.h1{font-size: 32px;color:#0ccc50;}

#login-dialog {display:block;width:380px;margin-left:6%;border:1px solid #d8dae0;border-radius:20px;padding:2rem}
#login-dialog > div{margin-bottom:10%;line-height:1.4;}

#login-frm {
    font-family: inherit;
    font-size: inherit;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-top:5px;
}

#login-frm>div:not(:last-child) {
    display: block;
    margin-bottom: 8%;
}

#login-frm label {
    display: block;
    position: relative;
    font-weight: bold;
    top: -20px;
    left: 0px;
    z-index: 1;
    transition: all 0.2s ease-out;
}

#login-frm input[type=text],
#login-frm input[type=password], #login-frm select {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    border: none;
    padding: 1%;
    color: #555;
    border-bottom: 1px solid #9a9a9a;
    border-radius: 0;
    background: linear-gradient(180deg, transparent 95%, #0ccc50 0) no-repeat;
    background-size: 0 100%;
    transition: background-size .2s ease;
}

#login-frm input[type=text]:focus,
#login-frm input[type=password]:focus, #login-frm select:focus {
    outline: none;
    /* border-bottom: 1px solid #0094d2; */
    background-size: 100% 100%;
    box-shadow: none;
}

#login-frm input[type=text]:hover,
#login-frm input[type=password]:hover, #login-frm select:hover {
    box-shadow: none;
}

input[type=text]:focus+label,
input[type=text]:valid+label {
    top: -40px !important;
}

input[type=password]:focus+label,
input[type=password]:valid+label {
    top: -40px !important;
}

select:focus+label,
select:valid+label {
    top: -40px !important;
}

.button {width:100px;text-decoration:none;font-family:inherit;font-size:inherit;font-weight:600;display:block;padding:10px 20px 10px 20px;background-color:#86d993;color:#fff;/* border:1px solid #0094d2; */border-radius:40px;cursor:pointer;transition: all .3s ease-in-out;}
.button:hover {color:#fff;background-color:#0ccc50;/* border:1px solid #0094d2; */}
.button:focus {outline:none;box-shadow:none;}

#msg {display:none;color:#df591e;font-weight:600;text-align:left;}

/* Smartphones (portrait and landscape) ----------- */
@media (min-width:0px) and (max-width:768px) {
	body {background-size:65% !important}
	#login-dialog {width:100%;margin:0;padding:10%;border:0}
	.body-content {background: #E9EBEE; vertical-align: middle}
	.login{background-image:none}
	.box-container{width: 100%; display: block; margin-bottom: 4%;}
	.main-container{white-space:normal;}
	.h1{font-size: 24px;}
}