-
-
-
-
@@ -77,21 +93,54 @@
-
-
+
+
+
+
diff --git a/app/src/main/assets/Homepage/style/cs-footer.css b/app/src/main/assets/Homepage/style/cs-footer.css
index 8355b1f9..927c7952 100644
--- a/app/src/main/assets/Homepage/style/cs-footer.css
+++ b/app/src/main/assets/Homepage/style/cs-footer.css
@@ -1,99 +1,120 @@
/*footer-bar style*/
-.fb_shared-footer-bar{
- position: relative;
- margin-top: -86px;
+.footer {
+ margin-top: 40vh;
}
-@media only screen and (max-width: 943px) {
- .fb_shared-footer-bar {
- display : none
- }
-}
-
-.fb_footer-bar__content_bottom{
- background-color:#5c5cd6;
+.footer__footer-bar{
+ background-color:#264d73;
border-style: solid;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
- border-color:#3333cc;
+ border-color:#19334d;
border-bottom-width: 0;
width:100%;
- text-align: center;
- height: 43px;
- padding: 10.5px 13px 8px;
+ padding-top:17px;
+ padding-bottom:17px;
}
-.fb_footer-bar__content_top{
- background-color:#5c5cd6;
- border-style: solid;
- border-top-width: 0;
- border-right-width: 0;
- border-left-width: 0;
- border-color:#3333cc;
- border-bottom-width: 0;
- width:100%;
- text-align: center;
- height: 43px;
- padding: 10.5px 13px 8px;
-}
-
-.fb_footer-bar__border_bottom {
+.footer__footer-bar--border-bottom {
border-bottom-width: 1px;
}
-.fb_footer-bar__text-bottom{
+.footer__footer-bar--text-bottom{
color:#767676;
font-size: 13px;
text-align:left;
}
-.fb_footer-bar__catagories--padding{
- padding: 15px 15px 8px;
+.footer__footer-bar__footer-bar-bottom{
+ background-color:#264d73;
+ border-bottom: 1px solid #204060;
+ width:100%;
+ padding-top:17px;
+ padding-bottom:17px;
}
-.fb_footer-bar__catagories--padding:hover{
- color: white !important;
- text-decoration: none !important;
- border-bottom: 4px solid whitesmoke !important;;
-}
-
-.fb_footer-bar__catagories--padding:focus {
- color: white !important;
- text-decoration: none !important;
- border-bottom: 4px solid white !important;
-}
-
-.fb_footer-bar__catagories{
+.footer__footer-bar-social{
+ margin-left: 40px;
+ color: white;
+ font-size: 17px;
cursor: pointer;
- color:white !important;
- font-family: Arial, sans-serif;
+}
+
+.footer__footer-bar-social:hover{
+ color: #19334d;
+}
+
+.footer__footer-bar-social--left{
+ margin-left: 30px;
+}
+
+.footer__footer-bar__footer-bar-mid{
+ background-color:#264d73;
+ border-bottom: 1px solid #204060;
+ width:100%;
+ padding-top:17px;
+ padding-bottom:17px;
+}
+
+.footer__catagories--general{
+ padding: 15px 15px 14px;
+}
+
+.footer__catagories--general:hover{
+ text-decoration: none;
+ border-bottom: 4px solid white;
+ animation-name: footer__catagories--border-animate;
+ color: white;
+}
+
+.footer__catagories--general:focus {
+ color: white;
+ text-decoration: none;
+ border-bottom: 4px solid white;
+}
+
+.footer__catagories{
+ cursor: pointer;
+ color:white;
font-size: 14px;
- height: 43px;
+}
+
+.footer__catagories{
+ cursor: pointer;
+ color:white;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: arial,sans-serif;
}
/*footer-bar events*/
-.fb_footer-bar__catagories:hover{
+.footer__catagories:hover{
}
-.fb_footer-bar__catagories-start:hover{
- color: white !important;
- text-decoration: none !important;
- border-bottom: 4px solid white !important;
+.footer__catagories--main:hover{
+ color: white;
+ text-decoration: none;
+ border-bottom: 4px solid white;
}
-.fb_footer-bar__catagories-start:focus {
- color: white !important;
- text-decoration: none !important;
- border-bottom: 4px solid white !important;
+.footer__catagories--main:focus {
+ color: white;
+ text-decoration: none;
+ border-bottom: 4px solid white;
}
-.fb_footer-bar__catagories-start{
- cursor: pointer;
- color:white !important;
- display: inline-block;
- font-size: 14px;
- font-family: Arial, sans-serif;
+.footer__catagories--main{
+ color: white;
margin-left: 15px;
+ padding: 15px 13px 14px;
+ font-size: 14px;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+@media only screen and (max-width: 943px) {
+ .footer {
+ display: none;
+ }
}
diff --git a/app/src/main/assets/Homepage/style/cs-homepage.css b/app/src/main/assets/Homepage/style/cs-homepage.css
index ec52b8a6..efa25b9a 100644
--- a/app/src/main/assets/Homepage/style/cs-homepage.css
+++ b/app/src/main/assets/Homepage/style/cs-homepage.css
@@ -1,341 +1,287 @@
-/*Search*/
-body{
- opacity: 0;
- transition: opacity 0s;
- -webkit-transition: opacity 0s; /* Safari */
+.home
+{
+ margin-left: -2px;
+ min-height: auto;
}
-
-.body_fadein {
- opacity: 1;
- transition-duration: 0.5s;
- transition-property: opacity;
-}
-
-.line-style {
- border: 0;
- height: 1px;
- background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
- background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
- background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
- background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
- width:40% !important;
- max-width:500px !important;
-}
-
-.clear_selection{
- moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select:none;
- user-select:none;
- -o-user-select:none;
-}
-
-#hi_search_container {
- margin-top:15vh;
- margin-bottom: -25px;
-}
-
-@media only screen and (max-width: 943px) {
- #hi_search_container {
- margin-top:9vh;
- }
-}
-
-@media only screen and (max-width: 943px) {
- #hi_search__search-button {
- visibility: hidden;
- }
-}
-
-.hi_logo_text{
- max-width: 450px;
+.home__logo{
+ max-width: 500px;
width: 90%;
height: auto;
display: block;
- margin-top: -20px;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 10px;
+ margin: 5% auto 10px;
}
-
-@media only screen and (max-width: 943px) {
- .hp_logo_text {
- max-width: 380px;
- }
-}
-
-.hi_logo_image{
- max-width: 150px;
- width: 30%;
- height: auto;
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 00px;
-}
-
-@media only screen and (max-width: 943px) {
- .hi_logo_image {
- max-width: 100px;
- }
-}
-
-.hi_search__logo{
- text-align: center;
- color: lightblue;
- margin-bottom: -17px;
- font-style: normal;
- font-variant: normal;
- line-height: 26px;
- font-family: helvetica, monospace;
- font-weight:bold;
-}
-
-.hi_search__search-box{
- border-radius: 8px !important;
- align-self: center;
- height:42px !important;
- outline: none;
-
- border-color: #e7e7e7;
- width:91% !important;
- max-width: 575px;
- display:block;
- font:16px arial,sans-serif;
- color: black;
- padding-left:22px;
- margin: 0 auto 5px;
-
- box-shadow: 0 1px 1px 0 #cccccc;
- -webkit-transition: .0s;
- -moz-transition: .0s;
- -o-transition: .0s;
- transition: .0s;
-}
-
-.hi_reference{
- align-self: center;
- height:auto;
- padding: 10px;
- padding-bottom: 0px;
+.home__searchbox{
border-radius: 6px;
+ height:42px;
outline: none;
-
- border: 1px solid #f0f0f0;
- box-shadow: 0 3px 3px 0 #cccccc;
- width:91% !important;
+ border-color: #e7e7e7;
+ width:97.9%;
max-width: 575px;
display:block;
font:16px arial,sans-serif;
color: black;
- margin: 0 auto 0px;
- margin-top: -15px;
- margin-bottom: 35px;
-
- -webkit-transition: .0s;
+ padding-left:13px;
+ box-shadow: 0 1px 1px 0 #e6e6e6;
-moz-transition: .0s;
- -o-transition: .0s;
transition: .0s;
+ margin: 20px auto 5px;
}
-
-@media only screen and (max-width: 943px) {
- .hi_search__search-box {
- margin-top: 30px;
- }
-}
-
-.hi_search__search-box:hover {
- box-shadow: 0 4px 4px -1.5px #cccccc;
- -webkit-transition: .07s linear 0s;
+.home__searchbox:hover {
+ box-shadow: 0 4.5px 4.5px -1.5px #e6e6e6;
-moz-transition: .07s linear 0s;
- -o-transition: .07s linear 0s;
transition: .07s linear 0s
}
-
-.hi_search__search-box:focus{
- box-shadow: 0 4px 4px -1.5px #cccccc !important;
- -webkit-transition: .07s linear 0s !important;;
- -moz-transition: .07s linear 0s !important;;
- -o-transition: .07s linear 0s !important;;
- transition: .07s linear 0s !important;
+.home__searchbox:focus{
+ box-shadow: 0 4.5px 4.5px -1.5px #e6e6e6;
+ -moz-transition: .07s linear 0s;
+ transition: .07s linear 0s
}
-
-/*footer-bar style*/
-.hi_search__logo{
- margin:0 auto;
+.home__search-button-container{
display:block;
- width: 90%;
- max-width: 400px;
-
+ text-align: center;
+ width: 43%;
+ margin: 30px auto 0;
}
-
-.hi_search__language-text{
- font-size: 14px;
- text-align:center;
- margin-top: 25px;
- padding-top: 3px
-}
-
-@media only screen and (max-width: 943px) {
- .hi_search__language-text {
- margin-top: 0px;
- }
-}
-
-.hi_search__language-name{
- color:#7173f8;
-}
-
-.hi_search__search-button{
+.home__search-button{
margin-top: 12px;
- background-color:#f2f2f2;
- height: 35px;
+ height: 40px;
width:110%;
text-align:center;
max-width: 130px;
+ border-radius: 6px;
border-width: 0;
color:#6c6c6c;
- font-size: 14px;
+ font-size: 15px;
+ background-color:#f5f5f5;
}
-
-@media only screen and (max-width: 943px) {
- .hi_search__search-button {
- width: 0;
- height: 0;
- }
+.search-content__info-danger{
+ box-shadow: 0 4px 4px -1.5px #1a1a1a;
+ background: #333333;
+ padding: 20px;
+ height: auto;
+ margin: 0;
+ border-radius: 7px 7px 7px 7px;
}
-
-.hi_search__button-container{
- display:block;
- text-align: center;
- width: 100% !important;
+.search-content__info-danger-header{
+ color: orange;
+ width: 100%;
+ line-height: 30px;
+ text-align: left;
+ font-size: 20px;
+ font-weight: bold;
}
-
-.hi_search__search-button--left-spacing{
- margin-left: 0
+.search-content__info-danger-body{
+ color: #ffffff;
+ text-align: left;
}
-
-/* Homepage Search Buttons */
-.hi_search__search-button:hover{
- color : #000000;
+.search-content__button-container{
+ width: 99%;
+ margin: 10px auto auto;
+}
+.search-content__button{
+ box-shadow: 0 4px 4px -1.5px #1a1a1a !important;
+ background: #333333 !important;
+ color: #ffffff !important;;
+ border: 0 !important;;
+ font-weight: bold !important;;
+ font-size: 14px !important;;
+ border-radius: 7px !important;;
+ width: 100% !important;;
+ height: 50px !important;;
+ display:block !important;;
+}
+.search-content__button--margin-auto{
+ margin: 0 auto;
+}
+.search-content__button--margin-top{
+ margin: 10px auto 5px;
+}
+.home__search-button:hover{
background: linear-gradient(#f7f7f7,#f1f1f1);
- border-style: solid;
border-width: 1px;
border-color:#C4C4C4;
- border-radius: 4px;
+ border-style: solid;
cursor:pointer;
}
-
-#hi_search_button {
+.home__search-button--right-spacing{
+ margin-left: 10px;
+}
+.home__search-button--lucky-visibility {
+ visibility: visible;
+}
+.home__search-button--left-spacing{
+ margin-left: 5px;
+}
+.home__line-style {
+ display: none;
+}
+.home__reference_links{
+ color:#bfbfbf;
+ text-align: center;
+ font-size: 13.5px;
+ max-width: 460px;
+ font-weight: bold;
+ border: 1px solid #e6e6e6;
+ border-radius: 5px;
+ padding-top: 14px;
+ padding-bottom: 14px;
+ margin: 10px auto 50px;
+ width: 89%;
+}
+.home__reference_container{
+ margin-top: 40px;
+ width: 75%;
+ margin-left: auto;
+ margin-right: auto;
+}
+.home__reference_wrapper {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+}
+.home__reference{
+ align-self: center;
+ height:180px;
+ padding: 10px 0 0;
+ border-radius: 8px;
+ outline: none;
+ border: 1px solid #f0f0f0;
+ box-shadow: 0 3px 3px 0 #cccccc;
+ width:91%;
+ max-width: 575px;
+ display:block;
+ font:16px arial,sans-serif;
+ color: black;
+ margin: -15px auto 45px;
+ border-bottom: 6px solid #f9f9f9;
+ background: #f9f9f9;
+}
+.home__reference:hover{
+ animation-name: home__reference-animate-hover;
+ animation-duration: 4s;
+ transition: border-bottom-color 0.25s ease-in-out;
+ border-bottom: 6px solid #548ec4;
+}
+@keyframes home__reference-animate-hover {
+ 10% {
+ background-color: #f0f4fa;
+ box-shadow: 0 8px 8px 0 #cccccc;
+ }
+}
+.home__reference--header{
+ font-weight: bold;
+ text-align: center;
font-size: 14px;
-}
-
-@media only screen and (max-width: 943px) {
- #hi_search_button {
- font-size: 13px;
- }
-}
-#hi_lucky_button {
- font-size: 14px;
-}
-
-@media only screen and (max-width: 943px) {
- #hi_lucky_button {
- font-size: 13px;
- }
-}
-
-.hi_reference_website{
+ color: #ffffff;
cursor: pointer;
+ width: auto;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ float: left;
+ margin-top: 10px;
+ border-left: 6px solid #548ec4;
+ background-color: #8db4d8;
+ margin-left: -1px;
+ display: flex;
+ padding: 10.5px 20px 10.5px 10px;
}
-
-.hi_container_size
-{
- min-height: 100% !important;
-}
-
-@media only screen and (max-width: 943px) {
- .hi_container_size {
- }
-}
-
-
-.hi_loader {
- border: 4px solid #f3f3f3;
- border-radius: 50%;
- border-top: 4px solid #3498db;
- width: 30px;
- float: left;
- height: 30px;
- -webkit-animation: spin 2s linear infinite; /* Safari */
- animation: spin 2s linear infinite;
-}
-
-.hi_loader_item{
- height:10px;
- border-width:0;
- color:gray;
- background-color:#cccccc;
-}
-
-.hi_reference_body{
- margin-left: 0px;
+.home__reference_info{
+ margin-left: 15px;
+ margin-right: 15px;
+ line-height: 18px;
+ color: #8c8c8c;
+ font-size: 13.5px ;
+ margin-top: 60px;
+}
+.home__reference-image-container{
+ width: 28px;
+ height: 28px;
+ border-radius: 5px;
+ align-content: center;
+ background: #e6e6e6;
+ margin-left: 15px;
+ float: left;
+}
+.home__reference-image{
+ max-width: 24px;
+ max-height: 24px;
+ margin-top: 2px;
+ margin-left: 2px;
+ border-radius: 5px;
+ font-size: 16px;
+ color: darkgray;
+ float: left;
+}
+.home__reference-status{
+ margin-left: 25px;
+ margin-right: 15px;
line-height: 18px;
- margin-top: 15px;
color: #8c8c8c;
font-size: 14px;
+ padding-top: 4px;
+ padding-left: 30px;
}
-.hi_reference_header{
- margin-left: 50px;
- padding-left: 10px;
- border-left: 4px solid #ecf2f9;
- font-weight: bold;
- font-size: 16px;
- color: #4080bf;
- height: 40px;
- padding-top:9px;
+.home__reference-status--color{
+ color: forestgreen;
}
-.hi_image_container{
- width: 40px;
- height: 40px;
- border-radius: 100px;
- float: left;
- background-color: #f5f5f5;
- display: flex;
+@media only screen and (max-width: 1743px) {
+ .home__reference_container{
+ width: 80%;
+ }
+ .home__reference_wrapper {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .home__reference{
+ height: 200px;
+ }
}
-.hi_reference_image{
- max-width: 22px; /* Or whatever */
- max-height: 22px; /* Or whatever */
- margin: auto; /* Magic! */
- border-radius: 4px;
- float:left;
- font-size: 20px;
- color: #bfbfbf;
- font-weight: bold;
+@media only screen and (max-width: 943px) {
+ .home
+ {
+ min-height: 100%;
+ }
+ .home__search-container {
+ padding: 0 20px 10px;
+ }
+ .home__searchbox {
+ margin-top: 30px;
+ border-bottom: 3px solid #ffe0b3;
+ }
+ .home__search-button-container{
+ visibility: hidden;
+ height: 0;
+ width: 0;
+ margin-bottom: -40px;
+ }
+ .home__search-button {
+ visibility: hidden;
+ }
+ .home__line-style{
+ border: 0;
+ display: block;
+ width:auto;
+ height: 4px;
+ background: orange;
+ margin: 0 43% 20px;
+ }
+ .home__reference_links{
+ margin-top: 0 !important;
+ }
+ .home__reference_container{
+ margin-top: 40px;
+ width: 100%;
+ }
+ .home__reference_wrapper {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 10px;
+ }
+ .home__reference{
+ margin-top: -20px;
+ height:auto;
+ }
}
-
-line-style
-/* Safari */
-@-webkit-keyframes spin {
- 0% { -webkit-transform: rotate(0deg); }
- 100% { -webkit-transform: rotate(360deg); }
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-.show {
- opacity: 1;
- transition: opacity 500ms;
-}
-
-.hide {
- opacity: 0;
- transition: opacity 350ms;
-}
\ No newline at end of file
diff --git a/app/src/main/assets/homepage/style/cs-home-header-blade.css b/app/src/main/assets/homepage/style/cs-home-header-blade.css
new file mode 100644
index 00000000..23db41c0
--- /dev/null
+++ b/app/src/main/assets/homepage/style/cs-home-header-blade.css
@@ -0,0 +1,65 @@
+.home-header{
+ text-align: right;
+ padding-top: 10px;
+ background: #f8f8f8;
+ height: 50px;
+ border-bottom: 1px solid #e6e6e6;
+
+}
+
+.home-header__catagory{
+ margin-right: 22px;
+ cursor: pointer;
+ font-size: 14px;
+ padding: 13px 7px 12px;
+ margin-top: 41px;
+ border-bottom: 4px solid #f8f8f8;
+ font-weight: 700;
+}
+
+.home-header__catagory--highlight{
+ color:#1967d2;
+ margin-right: 10px;
+}
+
+.home-header__catagory--normal{
+ color: #999999;
+}
+
+.home-header__catagory:hover{
+ text-decoration: none;
+ animation-duration: 2s;
+ animation-name: home-header__catagory-hover-animate;
+ border-bottom: 4px solid #548ec4;
+ transition: border-bottom-color 0.25s ease-in-out;
+}
+
+
+/* General Styles*/
+.home-header__vertical-line {
+ border-left: 1px solid #ebebeb;
+ height: 50px;
+ margin-right: 15px;
+}
+
+/* Mobile Devices */
+@media only screen and (max-width: 943px) {
+ .home-header__catagory--image{
+ display: none;
+ }
+ .home-header{
+ display: none;
+ }
+}
+
+/* Animations */
+@keyframes home-header__catagory-hover-animate {
+ 10% {
+ background: #ededed;
+ color: #336699;
+ }
+ 100% {
+ background: #ededed;
+ color: #336699;
+ }
+}
\ No newline at end of file
diff --git a/app/src/main/assets/homepage/style/cs-sidebar-blade.css b/app/src/main/assets/homepage/style/cs-sidebar-blade.css
new file mode 100644
index 00000000..eb5e7be7
--- /dev/null
+++ b/app/src/main/assets/homepage/style/cs-sidebar-blade.css
@@ -0,0 +1,242 @@
+/* General */
+.sidebar__menu{
+ display: none;
+ background:#fcfcfc;
+ width: 100%;
+ height: 50px;
+ padding-top: 0.2em;
+ border-bottom: 1px solid #ebebeb;
+}
+.sidebar_sidebar-header{
+ float: right;
+ padding-top: 9px;
+}
+.sidebar__catagory{
+ margin-right: 10px;
+ cursor: pointer;
+ font-size: 0.90em;
+ padding: 15px 10px 10px;
+ border-bottom: 4px solid #fcfcfc;
+}
+.sidebar__catagory:hover{
+ text-decoration: none;
+ animation-name: sidebar__catagory_animate_hover;
+ animation-duration: 2s;
+ border-bottom: 4px solid #548ec4;
+ transition: border-bottom-color 0.25s ease-in-out;
+ -webkit-animation-fill-mode: forwards;
+}
+@keyframes sidebar__catagory_animate_hover {
+ 10% {
+ background: #f0f0f0;
+ color: #336699;
+ }
+ 100% {
+ background: #f0f0f0;
+ color: #336699;
+ }
+}
+.sidebar__catagory--general{
+ color: #999999;
+ margin-right: 4px !important;
+}
+.sidebar__vertical-line {
+ border-left: 1px solid #e6e6e6;
+ height: 25px;
+ margin-bottom: -8px;
+ margin-right: 5px;
+}
+.sidebar__catagory--highlight{
+ color: #00689D;
+ margin-right: 10px !important;
+ margin-top: 100px !important;
+}
+.sidebar__menu-icon {
+ padding: 8px 8px;
+ z-index: 100;
+ color: black;
+ font-size: 22px;
+ cursor: pointer;
+ float: left;
+ display: none;
+ margin-left: 11px !important;
+}
+
+.sidebar__menu-icon:hover{
+ border-radius: 5px;
+ animation-name: sidebar__menu-icon-hover;
+ animation-duration: 3s;
+}
+@keyframes sidebar__menu-icon-hover {
+ 3% {
+ background: #ebebeb;
+ }
+ 14% {
+ background: #ffffff;
+ }
+}
+.sidebar__navigation{
+ width: 100%;
+ text-align: center;
+}
+
+.sidebar__navigation a{
+ display: block;
+ padding: 15px 0;
+ color: #FFFFFF;
+}
+
+.sidebar__navigation li:last-child a{
+ border-bottom: none;
+}
+.sidebar__list {
+ padding-right: 35%;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ left: -100%;
+ top: 0;
+ overflow-x: hidden;
+ background: none;
+ overflow-y: auto;
+ text-align:justify;
+ transition: all .25s ease-in-out;
+ -webkit-transition: all .25s ease-in-out;
+ -moz-transition: all .25s ease-in-out;
+ -ms-transition: all .25s ease-in-out;
+ -o-transition: all .25s ease-in-out;
+}
+.sidebar__close{
+ position: absolute;
+ width: 38%;
+ height: 100%;
+ right: 0;
+ color: white;
+ top: 0;
+ cursor: auto;
+ background: none;
+ border: none;
+}
+.sidebar__menu-container{
+ background: #204060;
+ padding-right: 10px;
+ min-height: 100%;
+ padding-bottom: 20px;
+ max-width: 270px;
+ width: 100%;
+ box-shadow: 0 8px 8px 0 #cccccc;
+ scrollbar-width: none;
+ height: 150px;
+ overflow-y: scroll;
+}
+.sidebar__button{
+ width: 10px;
+ height: 10px;
+ position: relative;
+ top:-52px;
+ left:92%;
+}
+.sidebar__list-logo{
+ max-width: 190px;
+ width: 100%;
+ cursor: pointer;
+ margin-bottom: 40px;
+ margin-top: 50px;
+ margin-left: 10px;
+ pointer-events: none;
+}
+.sidebar__list-icon{
+ width: 30px;
+ margin-right: 5px;
+ margin-left: 20px;
+ text-align: left;
+}
+.sidebar__list-info{
+ text-decoration: none !important;
+ background: #1d3b58;
+ padding-left: 5px;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ text-align: left;
+ display: inline-block;
+ line-height: 4px;
+ margin: 2px auto auto;
+ font-weight: bold;
+ font-size: 13.5px;
+ width: 85%;
+ font-family: Roboto,Helvetica Neue,Arial,sans-serif;
+ border-radius: 7px;
+}
+.sidebar__list-info--color{
+ color: #9fc0df !important;
+}
+
+.sidebar__line-divider{
+ background: #1d3b58;
+ border: 0;
+ display: block;
+ width:auto;
+ height: 2px;
+ margin-left: 45px;
+ margin-right: 50px;
+}
+.sidebar__list-icon--padding{
+ padding-left: 3px;
+}
+
+/* ID Triggers */
+
+#sidebar__menu-toggle {
+ display: none;
+}
+
+#sidebar__menu-toggle:checked ~ .sidebar__list {
+ position: fixed;
+ left: 0;
+}
+
+#sidebar__menu-toggle-mobile:hover ~ .sidebar__list {
+ position: fixed;
+ left: 0;
+}
+
+#sidebar__menu-toggle:checked ~ .mainarea {
+ position: fixed;
+ left: 100%;
+}
+#sidebar__menu-toggle:checked ~ .sidebar__menu-icon {
+ position: fixed;
+}
+
+#sidebar__menu-toggle-mobile {
+ display: none;
+}
+
+
+#sidebar__menu-toggle-mobile:checked ~ .mainarea {
+ position: fixed;
+ left: 100%;
+}
+#sidebar__menu-toggle-mobile:checked ~ .sidebar__menu-icon {
+ position: fixed;
+}
+.sidebar__list{
+ display: none;
+ z-index: 100;
+}
+
+/* Mobile View */
+@media only screen and (max-width: 943px) {
+ .sidebar__menu-icon{
+ display: block;
+ margin-top: -43px;
+ margin-bottom: 7vh;
+ margin-right: 5px;
+ }
+ .sidebar__list{
+ display: block;
+ }
+ .sidebar__menu{
+ display: block;
+ }
+}