default themes

borders.css

@@ -0,0 +1,38 @@
+.border {
+    border:1px solid #CAD5E0 ;    
+}
+.border-round {
+    padding:6px;
+    border-radius:8px;
+}
+.border-round-top-left{
+    border-top-left-radius: 8px;    
+    padding:6px;
+}
+.border-round-top-right{
+    border-top-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-right{
+    border-bottom-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-left{
+    border-bottom-left-radius: 8px;
+    padding:6px;
+}
+
+
+.border-right{
+    border-right:1px solid #CAD5E0;
+    
+}
+
+.border-left{
+    border-left:1px solid #CAD5E0;
+}
+
+
+.border-bottom { border-bottom:1px solid #CAD5E0}
+.border-top { border-top:1px solid #CAD5E0}
+

footer.css

@@ -0,0 +1,19 @@
+/**
+* This file styles the footer of the page
+*/
+
+.footer {
+    text-align:center;
+    display:grid;
+    grid-template-columns: repeat(3,1fr);
+    gap:4px;
+    padding:8px;
+    font-size:12px;
+    color:black;
+    align-items: center;
+    align-content: center;
+    text-transform: capitalize;
+    /* background-color: rgba(255,255,255,0.8); */
+    
+    grid-column: 1 /span 2;
+}

header.css

@@ -0,0 +1,3 @@
+.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
+.main .header .title {font-size:28px; font-weight:bold}
+.main .header img {width:55px; height:55px;}

layout.css

@@ -0,0 +1,22 @@
+
+
+.main {
+    height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
+    grid-template-rows:70px 40px auto 32px;
+    padding-left:2%; padding-right:2%;
+    line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
+}
+.main .content{
+    align-self:center;
+}
+.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
+.bold {font-weight:bold}
+.small-text {font-size:12px; font-weight:lighter; color :#000000;}
+.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
+.active:hover {border-bottom-color: #4682b4;}
+
+/**
+* 
+*/
+.large-text {font-weight:bold; font-size:28px;}
+    

menu.css

@@ -0,0 +1,78 @@
+.menu {
+    padding:8px;
+    border:1px solid #CAD5E0 ;
+    
+    display:grid;
+    grid-column: 1 / span 2;
+    grid-template-columns: 92px repeat(7,auto);
+    gap:4px;
+    text-transform: capitalize;
+    align-items: center;
+    
+}
+.menu .icon {padding:4px;}
+.menu .icon img {width:30px; height:30px;}
+.menu .item {
+    font-weight:bold;
+    cursor:pointer;
+    padding:4px;
+    text-align: left;
+   
+    
+   
+    
+    
+}
+
+.menu .sub-menu {
+    
+    display:none;
+    position:absolute;
+    
+    margin-top:2px;
+    min-width:10%;
+    z-index:90;
+    padding:8px;
+    font-weight:lighter;
+    text-align:left;
+    align-items:left; 
+    background-color: rgba(255,255,255,0.8);
+    
+}
+
+.menu .item:hover .sub-menu{
+    
+    display:block;
+    height:auto;    
+}
+/**
+* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
+*/
+.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
+.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
+/* .tab-content {width:80%;} */
+
+.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; 
+    /* background-color: #f3f3f3; */
+    padding-top:4px;
+    padding-left:4px;
+    padding-right:4px;
+}
+.tabs input[type=radio] {display:none; }
+.tabs input[type=radio] + label { font-weight:lighter;  
+    border:1px solid transparent;
+    border-bottom-color: #CAD5E0;
+    background-color: #f3f3f3;
+    padding:8px;
+    padding-right:10px; padding-left:10px;
+    
+    cursor:pointer
+}
+.tabs input[type=radio]:checked +label {
+    background-color: #ffffff;
+    border-top-right-radius: 8px; 
+    border-top-left-radius: 8px;
+    font-weight:bold;
+    border-color: #CAD5E0;
+    border-bottom-color: #FFFFFF;
+}

pane.css

@@ -0,0 +1,2 @@
+.main .pane { height:auto;}
+.main .pane iframe{ width:100%; border:0px; height:80%;}

responsive.css

@@ -0,0 +1,36 @@
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .main {
+        grid-template-columns: 60% 40%;
+        grid-template-rows: 70px auto 32px;
+    }
+}
+
+@media (max-width: 768px) {
+    .main {
+        grid-template-columns: 100%;
+        grid-template-rows: auto;
+        height: auto;
+    }
+    
+    .main .pane {
+        border-left: none;
+        border-top: 1px solid #CAD5E0;
+        padding: 8px;
+    }
+}
+
+@media (max-width: 480px) {
+    .main {
+        padding: 5%;
+        font-size: 14px;
+    }
+
+    .large-text {
+        font-size: 24px;
+    }
+
+    .small-text {
+        font-size: 10px;
+    }
+}