@import url("https://fonts.googleapis.com/css?family=Baloo|Cabin:400,500,700");

*, *:focus { outline: 0 !important; }



a, a:hover { text-decoration: none; }



#transition, .mainModules li, .subSection .subModuleList li article, .compose .writeQuestion { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; }



#appearance { -webkit-appearance: none; -moz-appearance: none; appearance: none; }



body { background-color: #333; font-family: 'Cabin', sans-serif; background-image: url("../images/patternBg.png"); }



.login { height: 100vh; width: 100vw; display: table; }

.login article { height: 100%; display: table-cell; vertical-align: middle; text-align: center; }

.login article form { display: inline-block; width: 100%; max-width: 300px; }

.login article form img { height: 200px; width: auto; margin: 0 auto 30px; display: block; }

.login article form .title { color: #FFF; font-family: "Baloo", cursive; font-size: 19px; }

.login article form input, .login article form button { height: 60px; width: 100%; border-radius: 30px; text-align: center; font-size: 19px; color: #666; border: 0; font-family: 'Cabin', sans-serif; margin-bottom: 30px; }

.login article form input:first-of-type { margin-bottom: 10px; }

.login article form button { background-color: #A35678; color: #FFF; text-transform: uppercase; font-size: 15px; cursor: pointer; }

.login article form a { color: #DDD; }



.fixedContainer { height: 100vh; width: 100vw; display: table; }

.fixedContainer > section { display: table-cell; vertical-align: middle; text-align: center; position: relative; }

.fixedContainer > section .content { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 4px; background-color: #FFF; overflow: hidden; }



.mainModules { background: #a35678; background: -moz-linear-gradient(top, #a35678 0%, #985caa 100%); background: -webkit-linear-gradient(top, #a35678 0%, #985caa 100%); background: linear-gradient(to bottom, #a35678 0%, #985caa 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a35678', endColorstr='#985caa', GradientType=1); margin: 0; position: absolute; left: 0; top: 0; width: 80px; bottom: 0; z-index: 2; }

.mainModules li { font-size: 12px; text-transform: uppercase; padding: 5px 5px 10px; line-height: 1; }

.mainModules li.active { background-color: rgba(255, 255, 255, 0.2); }

.mainModules li a { color: #FFF; }

.mainModules li a span { display: block; overflow: hidden; padding: 15px 15px 5px; }

.mainModules li a span img.svg, .mainModules li a span svg { height: 40px; width: 40px; float: left; }

.mainModules li:hover { background-color: rgba(255, 255, 255, 0.2); }



.serviceUser { background: #324C63; background: -moz-linear-gradient(top, #324C63 0%, #344D57 100%); background: -webkit-linear-gradient(top, #324C63 0%, #344D57 100%); background: linear-gradient(to bottom, #324C63 0%, #344D57 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#324C63', endColorstr='#344D57', GradientType=1); width: 200px; left: 80px; top: 0; bottom: 0; position: absolute; z-index: 2; }

.serviceUser > img { width: 200px; height: 200px; }

.serviceUser .title { text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-family: "Baloo", cursive; display: block; padding: 10px 15px; text-align: left; }

.serviceUser ul.info { margin: 0; padding: 15px; position: relative; overflow: hidden; }

.serviceUser ul.info:before { position: absolute; content: ""; top: 0; left: 15px; bottom: 15px; height: 100%; background-color: #334C5D; width: 1px; z-index: 2; }

.serviceUser ul.info:after { position: absolute; content: ""; top: 15px; left: 15px; right: 15px; background-color: #334C5D; height: 1px; z-index: 2; }

.serviceUser ul.info li { width: 50%; color: #FFF; float: left; font-size: 19px; border-left: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 10px 0; }

.serviceUser ul.info li small { display: block; color: rgba(255, 255, 255, 0.6); font-size: 13px; text-transform: uppercase; }

.serviceUser ul.info li:nth-child(3) { width: 100%; }

.serviceUser ul.alerts { margin: 0; }

.serviceUser ul.alerts li { padding: 15px 15px 15px 49px; position: relative; text-align: left; color: #FFF; }

.serviceUser ul.alerts li img.svg, .serviceUser ul.alerts li svg { height: 24px; width: 24px; position: absolute; left: 15px; top: 15px; }

.serviceUser ul.alerts li img.svg path, .serviceUser ul.alerts li svg path { fill: rgba(255, 255, 255, 0.7) !important; }



header { padding: 15px 15px 15px 295px; text-align: left; position: relative; z-index: 1; }

header:after { content: ''; position: absolute; bottom: 0; left: 295px; right: 15px; height: 1px; background-color: #DDD; }

header .name button { padding: 0; background: none; font-size: 29px; font-family: "Baloo", cursive; color: #457b9d; line-height: 1; padding: 0; }

header .name button:active, header .name button:focus { box-shadow: none; }

header .name ul li a { display: block; padding: 5px 10px; color: #666; }

header .residentialInfo { color: #999; }

header .welcome { line-height: 53px; display: inline-block; padding-right: 10px; }

header a.logout { display: block; height: 34px; width: 34px; padding: 5px; top: 9px; position: relative; }

header a.logout img.svg, header a.logout svg { height: 24px; width: 24px; float: left; }

header a.logout img.svg path, header a.logout svg path { fill: #457b9d; }



.dashboardLogo { position: absolute; top: 0; left: 10%; height: 10%; }

.dashboardLogo img { height: 100%; width: auto; padding-top: 10%; }



.poweredby { color: #FFF; position: absolute; right: 10%; bottom: 5%; }



.subSection { position: absolute; left: 295px; top: 100px; right: 15px; bottom: 15px; }

.subSection .title { display: block; font-size: 19px; color: #333; text-align: left; text-transform: uppercase; }

.subSection .subModuleList { width: 100%; overflow: hidden; }

.subSection .subModuleList ul { margin: 0 -15px; }

.subSection .subModuleList li { padding: 15px; float: left; width: 25%; }

@media screen and (min-width: 1600px) { .subSection .subModuleList li { width: 20%; } }

.subSection .subModuleList li article { border-radius: 4px; background: rgba(255, 255, 255, 0.1); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0.1)', endColorstr='rgba(0,0,0,0.1)', GradientType=1); padding-top: 100%; width: 100%; position: relative; border: 2px solid #EEE; }

.subSection .subModuleList li article:hover { background-color: #A5668B; }

.subSection .subModuleList li article:hover .datam { color: #FFF; }

.subSection .subModuleList li article:hover a img.svg path, .subSection .subModuleList li article:hover a svg path { fill: #FFF; }

.subSection .subModuleList li article:hover .activityDetails > span { color: #FFF; }

.subSection .subModuleList li article:hover .activityDetails .DateLabel { color: #EEE; }

.subSection .subModuleList li article:hover .module { color: #FFF; }

.subSection .subModuleList li article:hover .module .img img { margin-left: 0; }

.subSection .subModuleList li article:hover .module .img img.svg path, .subSection .subModuleList li article:hover .module .img svg path { fill: #FFF; }

.subSection .subModuleList li article .datam { position: absolute; left: 15px; top: 15px; color: #666; font-size: 30px; line-height: 1; text-align: left; }

.subSection .subModuleList li article .datam small { font-size: 15px; }

.subSection .subModuleList li article .datam sup { top: -8px; font-size: 12px; }

.subSection .subModuleList li article .activityDetails { position: absolute; left: 15px; top: 60px; text-align: left; font-size: 14px; }

.subSection .subModuleList li article .activityDetails > span { display: block; color: #666; }

.subSection .subModuleList li article .activityDetails .DateLabel { color: #999; }

.subSection .subModuleList li article .activityDetails .Date { font-size: 17px; font-weight: 500; }

.subSection .subModuleList li article a { display: block; position: absolute; left: 15px; bottom: 15px; height: 24px; width: 24px; padding: 3px; }

.subSection .subModuleList li article a img.svg, .subSection .subModuleList li article a svg { height: 18px; width: 18px; float: left; }

.subSection .subModuleList li article a img.svg path, .subSection .subModuleList li article a svg path { fill: #999; }

.subSection .subModuleList li article .module { display: inline-block; position: absolute; right: 15px; bottom: 15px; text-align: right; font-size: 12px; text-transform: uppercase; color: #666; width: 140px; }

.subSection .subModuleList li article .module .img { height: 50px; width: 50px; overflow: hidden; display: inline-block; }

.subSection .subModuleList li article .module .img img { height: 50px; width: auto; display: inline-block; margin-left: -50px; }

.subSection .subModuleList li article .module .img img path { fill: #999; }

.subSection .subModuleList li article .module .img img.svg, .subSection .subModuleList li article .module .img svg { height: 50px; width: 50px; display: inline-block; }

.subSection .subModuleList li article .module .img img.svg path, .subSection .subModuleList li article .module .img svg path { fill: #999; }

.subSection .subModuleList li article .module span { display: block; }

.subSection .subModuleList.smallText ul li .datam { font-size: 27px; text-align: left; }



.detailArea { overflow: hidden; }



.currentInfo { display: inline-block; padding-top: 20px; float: left; margin-right: 30px; }

.currentInfo img.svg, .currentInfo svg { height: 50px; width: 50px; float: left; margin: 0 10px 0 0; }

.currentInfo img.svg path, .currentInfo svg path { fill: #999; }

.currentInfo .unit { display: inline-block; font-size: 65px; font-weight: 300; float: left; margin: 0 5px 0 0; color: #9E5990; line-height: 50px; letter-spacing: -4px; }

.currentInfo .unit sup { top: -40px; font-size: 13px; letter-spacing: normal; left: -6px; }

.currentInfo .scale { float: right; color: #999; font-size: 29px; line-height: 1; padding-top: 9px; }

.currentInfo .scale small { display: block; font-size: 12px; text-transform: uppercase; }



.basicInfo { display: inline-block; height: 70px; padding-top: 20px; text-align: right; font-size: 13px; color: #666; }

.basicInfo span:first-of-type { padding: 0 20px; display: inline-block; }

.basicInfo span:nth-of-type(2) { display: block; padding: 5px 20px; border-radius: 18px; background-color: #736E97; color: #FFF; }



.detailedInfo { padding: 30px 0 0 0; position: relative; }

.detailedInfo > span { position: absolute; left: 50%; display: inline-block; line-height: 40px; color: #457B9D; font-family: "Baloo", cursive; font-size: 19px; -moz-transform: translateX(-50%) translateY(0); -webkit-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }

.detailedInfo > span:first-of-type { top: 88px; }

.detailedInfo > span:nth-of-type(2) { top: 158px; }

.detailedInfo ul { margin: 0; overflow: hidden; }

.detailedInfo ul li { text-align: center; float: left; padding: 0 10px; width: 14.28571428571429%; }

.detailedInfo ul li span { display: block; margin-bottom: 5px; color: #666; line-height: 1; letter-spacing: -1px; font-size: 13px; }

.detailedInfo ul li span:nth-of-type(2), .detailedInfo ul li span:nth-of-type(3) { width: 40px; height: 40px; border-radius: 20px; background-color: #334C60; color: #FFF; text-align: center; line-height: 40px; margin: 0 auto; }

.detailedInfo ul li span:nth-of-type(2) { margin-bottom: 30px; }



.well { padding: 10px 15px; background-color: #EEE; border: 1px solid #DDD; border-radius: 4px; }



.feedback { padding-top: 10px; }

.feedback .question { position: relative; background-color: #798cb5; border-radius: 4px; padding: 10px 50px 10px 15px; text-align: left; margin-bottom: 5px; color: #FFF; z-index: 10; }

.feedback .question .reply { position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 8px; border-radius: 4px; background-color: #FFF; width: 40px; cursor: pointer; }

.feedback .question .reply img.svg, .feedback .question .reply svg { position: absolute; top: 50%; left: 8px; -moz-transform: translateX(0) translateY(-50%); -webkit-transform: translateX(0) translateY(-50%); -o-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); height: 24px; width: 24px; }

.feedback .question .reply img.svg path, .feedback .question .reply svg path { fill: #798cb5; }

.feedback .question ~ .textarea { display: none; position: relative; }

.feedback .question ~ .textarea textarea { border-radius: 4px; border: 1px solid #DDD; resize: none; width: 100%; position: relative; z-index: 5; height: 85px; padding: 10px; }

.feedback .question ~ .textarea button { position: absolute; right: 10px; bottom: 10px; border-radius: 4px; color: #FFF; border: 0; background-color: #985caa; z-index: 10; cursor: pointer; }

.feedback ul li { text-align: right; margin-bottom: 5px; position: relative; padding-left: 100px; }

.feedback ul li .dateTime { position: absolute; left: 0; top: 5px; color: #666; font-size: 12px; }

.feedback ul li .dateTime small { display: block; }

.feedback ul li .text { border-radius: 18px 4px 4px 18px; background-color: #DDD; padding: 10px 15px; display: block; }

.feedback ul li:first-child .text { border-radius: 18px 18px 4px 18px; }

.feedback ul li:last-child .text { border-radius: 18px 4px 18px 18px; }

.feedback ul li:only-child .text { border-radius: 18px; }



.nav-tabs .nav-item .nav-link { color: #999; }

.nav-tabs .nav-item .nav-link.active { color: #333; }



.compose { position: absolute; right: 0; top: 0; }

.compose .icon { height: 44px; width: 44px; display: block; border-radius: 22px; padding: 10px; cursor: pointer; background-color: #477A9C; }

.compose .icon img.svg, .compose .icon svg { height: 24px; width: 24px; float: left; }

.compose .writeQuestion { position: absolute; background: #88b7d5; right: calc(100% + 15px); top: 0; padding: 10px; border-radius: 8px; z-index: 15; opacity: 0; visibility: hidden; -moz-transform: translateX(30px) translateY(0); -webkit-transform: translateX(30px) translateY(0); -o-transform: translateX(30px) translateY(0); -ms-transform: translateX(30px) translateY(0); transform: translateX(30px) translateY(0); }

.compose .writeQuestion.show { opacity: 1; visibility: visible; -moz-transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0); -o-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

.compose .writeQuestion textarea { width: 480px; height: 80px; resize: none; border: 0; border-radius: 8px; padding: 5px 70px 5px 5px; float: left; }

.compose .writeQuestion button { border-radius: 8px; border: 1px dashed #DDD; background-color: #FFF; position: absolute; right: 15px; top: 15px; bottom: 15px; }

.compose .writeQuestion:after { left: 100%; top: 22px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; margin-top: -10px; }



.picture { overflow: hidden; border-radius: 4px; border: 2px solid #DDD; }

.picture .img { padding-top: 100%; position: relative; display: block; width: 100%; cursor: pointer; }

.picture .img img { position: absolute; width: 100%; top: 50%; left: 0; -moz-transform: translateX(0) translateY(-50%); -webkit-transform: translateX(0) translateY(-50%); -o-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); }

.picture .caption { background-color: #DDD; display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 30px; font-size: 12px; padding: 0 10px; }



#carePlan .modal-dialog { position: absolute; top: 30px; bottom: 30px; overflow: hidden; border-radius: .3rem; margin: 0; left: 50%; -moz-transform: translateX(-50%) translateY(0); -webkit-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); max-width: 1000px; }

#carePlan .modal-dialog .modal-content { width: 650px; height: 100%; }

#carePlan .modal-dialog .modal-content .modal-body { height: calc(100% - 63px - 71px); overflow: hidden; overflow-y: auto; }



.uploadPicture { display: block; width: 200px; height: 200px; border-radius: 4px; border: 2px solid #DDD; position: relative; margin: 0 auto; background-color: #EEE; margin-bottom: 5px; }

.uploadPicture img.svg, .uploadPicture svg { position: absolute; left: 50%; top: 50%; height: 30px; width: 30px; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

.uploadPicture img.svg path, .uploadPicture svg path { fill: #999; }

.uploadPicture ~ input[type="text"] { width: 350px; border-radius: 18px; height: 36px; border: 1px solid #DDD; text-align: center; margin: 0 auto; display: block; padding: 0 10px; }



.scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: absolute !important; left: 0; right: 0; bottom: 0; }

.scroll-wrapper.modules { top: 0; }

.scroll-wrapper.serviceUserInfo { top: 200px; }

.scroll-wrapper.contentArea { top: 40px; }

.scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; }

.scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; }

.scroll-wrapper.scroll--rtl { direction: rtl; }



.scroll-element { box-sizing: content-box; display: none; }

.scroll-element div { box-sizing: content-box; }

.scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; }

.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; }



.scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; }

.scroll-textarea > .scroll-content { overflow: hidden !important; }

.scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; }

.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; }



.scrollArea > .scroll-element, .scrollArea > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; }



.scrollArea > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; }



.scrollArea > .scroll-element.scroll-x { bottom: 2px; height: 8px; left: 0; width: 100%; }



.scrollArea > .scroll-element.scroll-y { height: 100%; right: 2px; top: 0; width: 8px; }



.scrollArea > .scroll-element .scroll-element_outer { overflow: hidden; }



.scrollArea > .scroll-element .scroll-element_outer, .scrollArea > .scroll-element .scroll-element_track, .scrollArea > .scroll-element .scroll-bar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }



.scrollArea > .scroll-element .scroll-element_track { background-color: rgba(255, 255, 255, 0.1); }



.scrollArea > .scroll-element .scroll-bar { background-color: rgba(255, 255, 255, 0.3); }



.scrollArea > .scroll-element:hover .scroll-bar { background-color: white; }



/* update scrollbar offset if both scrolls are visible */

.scrollArea > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }



.scrollArea > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }



.scrollArea > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }



.scrollArea > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }