You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

643 lines
26KB

  1. <template>
  2. <div id="app" class="container-fluid">
  3. <nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start">
  4. <b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
  5. Swarmlab.io
  6. </b-navbar-brand>
  7. <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
  8. <ul class="navbar-nav mx-auto text-md-center text-left">
  9. <b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
  10. <li class="nav-item">
  11. <a class="nav-link" href="#">
  12. -
  13. </a>
  14. </li>
  15. <li class="nav-item my-auto">
  16. <a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="nav-link" href="#">
  20. -
  21. </a>
  22. </li>
  23. <b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Swarmlab_Cloud </b-nav-item>
  24. </ul>
  25. <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
  26. <!-- --------------- socket connection -->
  27. <b-nav-item
  28. @click="onAction('check')"
  29. >Connection Status:</b-nav-item>
  30. <b-nav-item >Agent</b-nav-item>
  31. <!--
  32. v-if="$socket.disconnected"
  33. -->
  34. <li class="nav-item"
  35. v-if="issocket === 'close'"
  36. >
  37. <a
  38. class="ti-link nav-link text-danger"
  39. href="#"
  40. title="You are disconnected from hybrid_agent"
  41. >
  42. </a>
  43. </li>
  44. <li class="nav-item"
  45. v-else
  46. >
  47. <a
  48. class="ti-link nav-link text-success"
  49. href="#"
  50. title="You are connected hybrid_agent"
  51. @click="onAction('connect')"
  52. >
  53. </a>
  54. </li>
  55. <!-- --------------- socket connection -->
  56. <!-- --------------- wg connection -->
  57. <b-nav-item >Server</b-nav-item>
  58. <li class="nav-item"
  59. v-if="isconnect!==true"
  60. >
  61. <a
  62. class="ti-link nav-link text-danger"
  63. href="#"
  64. title="You are disconnected from hybrid_server"
  65. >
  66. </a>
  67. </li>
  68. <li class="nav-item"
  69. v-else
  70. >
  71. <a
  72. class="ti-link nav-link text-success"
  73. href="#"
  74. title="You are connected hybrid_server"
  75. >
  76. </a>
  77. </li>
  78. <!-- --------------- wg connection -->
  79. <b-nav-item > </b-nav-item>
  80. </ul>
  81. </div>
  82. </nav>
  83. <!-- ***************** container items ****************** -->
  84. <b-row >
  85. <b-col cols="12" >
  86. <div class="d-flex" id="wrapper">
  87. <!-- Sidebar max -------------------------------- -->
  88. <div class=" bg-light border-right" id="sidebar-wrapper"
  89. style="width: 15rem;"
  90. v-if="sidemenou == 'max'"
  91. >
  92. <div class="list-group list-group-flush"
  93. >
  94. <!-- Menou Dashboard -->
  95. <b-list-group-item v-b-toggle.hybrid-dashboard variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }" @click="hybrid('dashboard')" > Dashboard</b-list-group-item>
  96. <b-collapse id="hybrid-dashboard" class="m-subm" accordion="m-sidebar" role="tabpanel">
  97. <b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Dashoard</b-list-group-item>
  98. <!--
  99. <b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
  100. -->
  101. </b-collapse>
  102. <!-- Menou Settings -->
  103. <b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Local" class="ti-user list-group-item list-group-item-action" v-on:click="setActive('profile','')" style="cursor: pointer;" :class="{ active: isActive('profile') }" @click="hybrid('connect-server')" > Profile</b-list-group-item>
  104. <b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
  105. <!--
  106. <b-list-group-item variant="light" name="profile" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('profile','profile_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_profile') } " > Local</b-list-group-item>
  107. -->
  108. <b-list-group-item variant="light" name="Settings" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('settings','profile_settings')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_settings') }" @click="hybrid('connect-server')"> Settings</b-list-group-item>
  109. </b-collapse>
  110. <!-- Menou hybrid -->
  111. <b-list-group-item v-b-toggle.hybrid-hybrid variant="light" name="Local" class="ti-loop list-group-item list-group-item-action" v-on:click="setActive('hybrid','')" style="cursor: pointer;" :class="{ active: isActive('hybrid') }" @click="hybrid('manage_service')" > Hybrid</b-list-group-item>
  112. <b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
  113. <b-list-group-item variant="light" name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')"> Join</b-list-group-item>
  114. <b-list-group-item variant="light" name="Deploy" class="ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_deploy')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_deploy') }" @click="hybrid('manage_deploy')"> Deploy</b-list-group-item>
  115. </b-collapse>
  116. <!-- Menou container -->
  117. <b-list-group-item v-b-toggle.hybrid-container variant="light" name="Local" class="ti-package list-group-item list-group-item-action" v-on:click="setActive('container','')" style="cursor: pointer;" :class="{ active: isActive('container') }" @click="hybrid('bootstrap')" > Container</b-list-group-item>
  118. <b-collapse id="hybrid-container" class="m-subm" accordion="m-sidebar" role="tabpanel">
  119. <b-list-group-item variant="light" name="Container" class="ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('container','hybrid_container')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_container') }" @click="hybrid('bootstrap')"> Container</b-list-group-item>
  120. </b-collapse>
  121. <!-- Menou private -->
  122. <b-list-group-item v-b-toggle.hybrid-private variant="light" name="Private" class="ti-home list-group-item list-group-item-action" v-on:click="setActive('private','')" style="cursor: pointer;" :class="{ active: isActive('private') }" @click="hybrid('services')" > Private</b-list-group-item>
  123. <b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
  124. <b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')"> Bootstrap</b-list-group-item>
  125. </b-collapse>
  126. <!-- Menou llo -->
  127. <b-list-group-item v-b-toggle.hybrid-llo variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" > LearningObjects</b-list-group-item>
  128. <b-collapse id="hybrid-llo" class="m-subm" accordion="m-sidebar" role="tabpanel">
  129. <b-list-group-item variant="light" name="Container" class="ti-view-list m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('llo','hybrid_llo')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_llo') }" @click="hybrid('llo')"> Courses</b-list-group-item>
  130. </b-collapse>
  131. <!-- Menou close -->
  132. <b-list-group-item variant="light" name="menou-min" class="ti-angle-double-left list-group-item list-group-item-action" v-on:click="onActionMenu('min')" style="cursor: pointer;" :class="{ active: isActive('menou-min') }" title="Minimize"></b-list-group-item>
  133. </div>
  134. </div>
  135. <!-- /Sidebar max ------------------------------------ -->
  136. <!-- Sidebar min -------------------------------- -->
  137. <div class=" bg-light border-right" id="sidebar-wrapper"
  138. v-if="sidemenou == 'min'"
  139. >
  140. <div class="list-group list-group-flush"
  141. >
  142. <!-- Menou Dashboard -->
  143. <b-list-group-item v-b-toggle.hybrid-dashboard variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }" @click="hybrid('dashboard')" title="Dashboard"></b-list-group-item>
  144. <b-collapse id="hybrid-dashboard" class="m-subm" accordion="m-sidebar" role="tabpanel">
  145. <b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }" title="Dashboard"></b-list-group-item>
  146. <!--
  147. <b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
  148. -->
  149. </b-collapse>
  150. <!-- Menou Settings -->
  151. <b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Local" class="ti-user list-group-item list-group-item-action" v-on:click="setActive('profile','')" style="cursor: pointer;" :class="{ active: isActive('profile') }" @click="hybrid('connect-server')" title="Profile" > </b-list-group-item>
  152. <b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
  153. <b-list-group-item variant="light" name="Settings" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('settings','profile_settings')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_settings') }" @click="hybrid('connect-server')" title="Profile"> </b-list-group-item>
  154. </b-collapse>
  155. <!-- Menou hybrid -->
  156. <b-list-group-item v-b-toggle.hybrid-hybrid variant="light" name="Local" class="ti-loop list-group-item list-group-item-action" v-on:click="setActive('hybrid','')" style="cursor: pointer;" :class="{ active: isActive('hybrid') }" @click="hybrid('manage_service')" title="Hybrid" > </b-list-group-item>
  157. <b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
  158. <b-list-group-item variant="light" name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')" title="Zones"> </b-list-group-item>
  159. <b-list-group-item variant="light" name="Deploy" class="ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_deploy')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_deploy') }" @click="hybrid('manage_deploy')" title="Deploy"> </b-list-group-item>
  160. </b-collapse>
  161. <!-- Menou container -->
  162. <b-list-group-item v-b-toggle.hybrid-container variant="light" name="Local" class="ti-package list-group-item list-group-item-action" v-on:click="setActive('container','')" style="cursor: pointer;" :class="{ active: isActive('container') }" @click="hybrid('bootstrap')" title="Container"> </b-list-group-item>
  163. <b-collapse id="hybrid-container" class="m-subm" accordion="m-sidebar" role="tabpanel">
  164. <b-list-group-item variant="light" name="Container" class="ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('container','hybrid_container')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_container') }" @click="hybrid('bootstrap')" title="Show all containers"> </b-list-group-item>
  165. </b-collapse>
  166. <!-- Menou private -->
  167. <b-list-group-item v-b-toggle.hybrid-private variant="light" name="Private" class="ti-home list-group-item list-group-item-action" v-on:click="setActive('private','')" style="cursor: pointer;" :class="{ active: isActive('private') }" @click="hybrid('services')" title="Private"> </b-list-group-item>
  168. <b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
  169. <b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')" title="Bootstrap"> </b-list-group-item>
  170. </b-collapse>
  171. <!-- Menou llo -->
  172. <b-list-group-item v-b-toggle.hybrid-llo variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" title="LearningObjects" > </b-list-group-item>
  173. <b-collapse id="hybrid-llo" class="m-subm" accordion="m-sidebar" role="tabpanel">
  174. <b-list-group-item variant="light" name="Container" class="ti-view-list m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('llo','hybrid_llo')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_llo') }" @click="hybrid('llo')" title="Courses"> </b-list-group-item>
  175. </b-collapse>
  176. <!-- Menou close -->
  177. <b-list-group-item variant="light" name="menou-max" class="ti-angle-double-right list-group-item list-group-item-action" v-on:click="onActionMenu('max')" style="cursor: pointer;" title="Maximize"></b-list-group-item>
  178. </div>
  179. </div>
  180. <!-- /Sidebar max ------------------------------------ -->
  181. <!-- /#sidebar-wrapper -->
  182. <!-- Page Content -->
  183. <!-- content----------------------------------- -->
  184. <div class="w-100 p-3" style="background-color: #eee;">
  185. <!-- ----------------------------------- -->
  186. <!-- ------ hybrid dashboard --------------- -->
  187. <!-- ----------------------------------- -->
  188. <view-dashboard
  189. v-if="hybridmenou == 'dashboard'"
  190. style="background-color: #f8f9fa"
  191. >
  192. </view-dashboard>
  193. <!-- ----------------------------------- -->
  194. <!-- ------ hybrid dashboard --------------- -->
  195. <!-- ----------------------------------- -->
  196. <!-- ----------------------------------- -->
  197. <!-- ------ hybrid settings --------------- -->
  198. <!-- ----------------------------------- -->
  199. <connect-server
  200. style="background-color: #f8f9fa"
  201. v-show="hybridmenou == 'connect-server'"
  202. >
  203. </connect-server>
  204. <!-- ----------------------------------- -->
  205. <!-- ------ hybrid settings --------------- -->
  206. <!-- ----------------------------------- -->
  207. <!-- ----------------------------------- -->
  208. <!-- ------ hybrid manage services --------------- -->
  209. <!-- ----------------------------------- -->
  210. <manage-services
  211. v-if="hybridmenou == 'manage_service'"
  212. style="background-color: #f8f9fa"
  213. >
  214. </manage-services>
  215. <!-- ----------------------------------- -->
  216. <!-- ------ hybrid manage services --------------- -->
  217. <!-- ----------------------------------- -->
  218. <!-- ----------------------------------- -->
  219. <!-- ------ hybrid manage llo --------------- -->
  220. <!-- ----------------------------------- -->
  221. <manage-llo
  222. v-if="hybridmenou == 'llo'"
  223. style="background-color: #f8f9fa"
  224. >
  225. </manage-llo>
  226. <!-- ----------------------------------- -->
  227. <!-- ------ hybrid manage llo --------------- -->
  228. <!-- ----------------------------------- -->
  229. <!-- ----------------------------------- -->
  230. <!-- ------ hybrid container --------------- -->
  231. <!-- ----------------------------------- -->
  232. <network-table
  233. v-show="hybridmenou == 'bootstrap'"
  234. style="background-color: #f8f9fa"
  235. >
  236. </network-table>
  237. <!-- ----------------------------------- -->
  238. <!-- ------ hybrid container --------------- -->
  239. <!-- ----------------------------------- -->
  240. <!-- ----------------------------------- -->
  241. <!-- ------ hybrid private bootstrap --------------- -->
  242. <!-- ----------------------------------- -->
  243. <services-table
  244. v-show="hybridmenou == 'services'"
  245. style="background-color: #f8f9fa"
  246. >
  247. </services-table>
  248. <!-- ----------------------------------- -->
  249. <!-- ------ hybrid private bootstrap --------------- -->
  250. <!-- ----------------------------------- -->
  251. <!-- ----------------------------------- -->
  252. <!-- ------ hybrid private deploy --------------- -->
  253. <!-- ----------------------------------- -->
  254. <manage-deploy
  255. v-if="hybridmenou == 'manage_deploy'"
  256. style="background-color: #f8f9fa"
  257. >
  258. </manage-deploy>
  259. <!-- ----------------------------------- -->
  260. <!-- ------ hybrid private deploy --------------- -->
  261. <!-- ----------------------------------- -->
  262. </div>
  263. <!-- Page Content -->
  264. <!-- /#page-content-wrapper -->
  265. </div>
  266. <!-- /#wrapper -->
  267. </b-col>
  268. </b-row>
  269. </div>
  270. </template>
  271. <script>
  272. import "@/assets/css/themify-icons.css";
  273. import store from '@/store/index'
  274. import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
  275. import Vue from 'vue'
  276. import ConnectServer from "./components/myconnect-server.vue";
  277. import NetworkTable from "./components/mynetwork.vue";
  278. import ServicesTable from "./components/myservices.vue";
  279. import ManageServices from "./components/manageservices.vue";
  280. import ManageDeploy from "./components/managedeploy.vue";
  281. import ManageLlo from "./components/managello.vue";
  282. import ViewDashboard from "./components/dashboard.vue";
  283. export default {
  284. name: 'app',
  285. components: {
  286. NetworkTable,
  287. ViewDashboard,
  288. ServicesTable,
  289. ConnectServer,
  290. ManageServices,
  291. ManageDeploy,
  292. ManageLlo
  293. },
  294. data() {
  295. return {
  296. setStatusAgent:'',
  297. issocket:false, //socket server
  298. isconnect:false, // dockerswarm wg
  299. activeItem: '', // menou
  300. activeItemSub: '', //submenou
  301. sidemenou:'max',
  302. hybridmenou:'dashboard',
  303. show: true,
  304. token: '',
  305. SwarmabAsciiLabTemplate:''
  306. }
  307. },
  308. mounted() {
  309. this.$root.$on('hybrid_server_status', (value) => {
  310. this.serverstatus()
  311. })
  312. },
  313. beforeDestroy () {
  314. this.$root.$off('hybrid_server_status')
  315. },
  316. created() {
  317. },
  318. methods: {
  319. async onAction(action){
  320. if(action == 'check'){
  321. if(this.$socket.disconnected){
  322. var socketStatus = 'close'
  323. }else if(this.$socket.connected){
  324. var socketStatus = 'open'
  325. }
  326. if(this.isconnect){
  327. var serverStatus = 'open'
  328. }else{
  329. var serverStatus = 'close'
  330. }
  331. var info="Status<br>"
  332. info+="Agent is " + socketStatus+"<br>"
  333. info+="Server is " + serverStatus
  334. this.$swal({
  335. type: 'info',
  336. html: info,
  337. showCloseButton: true,
  338. showLoaderOnConfirm: false,
  339. allowOutsideClick: false,
  340. cancelButtonText: 'No, cancel!',
  341. //showCancelButton: true,
  342. showLoaderOnConfirm: false,
  343. //reverseButtons: true,
  344. focusCancel: true
  345. //confirmButtonText: 'Yes, Connect!'
  346. })
  347. }
  348. },
  349. async serverstatus(action){
  350. var log = store.getters['pipelineLLO/getstatus']
  351. //console.log('status log ' + JSON.stringify(log))
  352. if(log.data.swarmlab == 'active' && log.data.hybrid == 'Online'){
  353. this.isconnect=true
  354. }else{
  355. this.isconnect=false
  356. }
  357. },
  358. onActionMenu(action){
  359. if(action == 'max'){
  360. this.sidemenou = 'max'
  361. }else if(action == 'min'){
  362. this.sidemenou = 'min'
  363. }
  364. //console.log(action)
  365. },
  366. hybrid(action) {
  367. this.hybridmenou = action
  368. console.log(action)
  369. if(action == 'bootstrap'){
  370. this.$root.$emit('hybrid_refresh_dockerservices')
  371. }else if(action == 'dashboard'){
  372. console.log('dashboard '+action)
  373. }else if(action == 'connect-server'){
  374. this.$root.$emit('hybrid_connect_server')
  375. }else if(action == 'llo'){
  376. console.log('llo '+action)
  377. //this.$root.$emit('hybrid_manage_llo')
  378. }else if(action == 'services'){
  379. this.$root.$emit('hybrid_refresh_availableservices')
  380. }else if(action == 'manage_service'){
  381. //this.$root.$emit('hybrid_manage_service')
  382. }else if(action == 'manage_deploy'){
  383. }
  384. },
  385. isActive: function (menuItem) {
  386. //console.log('active ' + menuItem);
  387. return this.activeItem === menuItem
  388. },
  389. isActiveSub: function (menuItem) {
  390. //console.log('activesub ' + menuItem);
  391. return this.activeItemSub === menuItem
  392. },
  393. setActive: function (menuItem,menuItemSub) {
  394. //console.log('set ' + menuItem);
  395. this.activeItem = menuItem // no need for Vue.set()
  396. this.activeItemSub = menuItemSub // no need for Vue.set()
  397. }
  398. },
  399. computed: {
  400. socketStatus() {
  401. return store.getters['pipelineLLO/getsocketStatus']
  402. }
  403. },
  404. watch: {
  405. socketStatus(status) {
  406. console.log('watchok '+status)
  407. this.issocket = status
  408. }
  409. }
  410. }
  411. </script>
  412. <style>
  413. .active {
  414. background-color: #e7e7e7 !important;
  415. color: #0c5460 !important;
  416. }
  417. @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
  418. body {
  419. background: #EEF1F4 !important;
  420. }
  421. .nav-background {
  422. background: #353535;
  423. }
  424. .ti-swarmlab:before {
  425. position: relative;
  426. top:-5px;
  427. right:-8px;
  428. font-size: 1.5em;
  429. font-weight: 300;
  430. content: "\e606";
  431. color: #222;
  432. color: #74B3C8;
  433. border-color: #c60000;
  434. }
  435. .ti-themify-logo:before {
  436. content: "\e6d1";
  437. }
  438. .menoutext {
  439. font-family: 'Lato', sans-serif !important;
  440. }
  441. .mycontainer {
  442. padding-right: 20px !important;
  443. padding-left: 5px !important;
  444. margin-right:auto;
  445. margin-left:auto
  446. }
  447. .m-subm {
  448. width: 100%;
  449. border-left: 4px solid #4b4ba3;;
  450. background-color: #f0f0f0;
  451. border-top: none;
  452. border-bottom: none;
  453. border-right: none;
  454. }
  455. .m-subm-card {
  456. padding-left: 0px;
  457. padding-right: 0px;
  458. padding-top: 0px;
  459. padding-bottom: 0px;
  460. background-color: #f0f0f0;
  461. border-top: none;
  462. border-bottom: none;
  463. border-left: none;
  464. border-right: none;
  465. margin-bottom: 0px;
  466. margin-top: 0px;
  467. }
  468. .m-subm-listgroup {
  469. width: 100%;
  470. //border-left: 4px solid #4b4ba3;
  471. background-color: #f0f0f0;
  472. border-top: none;
  473. border-bottom: none;
  474. border-right: none;
  475. border-left: none;
  476. padding-left: 2.25rem;
  477. }
  478. .m-subm-listgroup:hover {
  479. background-color: #e7e7e7;
  480. font-weight: 580;
  481. }
  482. .m-subm-listgroup:focus {
  483. background-color: #e7e7e7;
  484. color:#393982;
  485. font-weight: 580;
  486. }
  487. /*!
  488. * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template/simple-sidebar)
  489. * Copyright 2013-2020 Start Bootstrap
  490. * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
  491. */
  492. #sidebar-wrapper .list-group {
  493. margin:0;
  494. line-height:30px;
  495. font-size:12px;
  496. font-weight:600;
  497. }
  498. /*
  499. #sidebar-wrapper .list-group {
  500. width: 15rem;
  501. }
  502. #wrapper {
  503. overflow-x: hidden;
  504. }
  505. #sidebar-wrapper {
  506. min-height: 100vh;
  507. margin-left: -15rem;
  508. -webkit-transition: margin .25s ease-out;
  509. -moz-transition: margin .25s ease-out;
  510. -o-transition: margin .25s ease-out;
  511. transition: margin .25s ease-out;
  512. }
  513. #sidebar-wrapper .sidebar-heading {
  514. padding: 0.875rem 1.25rem;
  515. font-size: 1.2rem;
  516. }
  517. #sidebar-wrapper .list-group {
  518. width: 15rem;
  519. }
  520. #wrapper.toggled #sidebar-wrapper {
  521. margin-left: 0;
  522. }
  523. @media (min-width: 768px) {
  524. #sidebar-wrapper {
  525. margin-left: 0;
  526. }
  527. #page-content-wrapper {
  528. min-width: 0;
  529. width: 100%;
  530. }
  531. #wrapper.toggled #sidebar-wrapper {
  532. margin-left: -15rem;
  533. }
  534. }
  535. #page-content-wrapper {
  536. min-width: 100vh;
  537. }
  538. */
  539. </style>