body{ background-color: #C7F9CC; height:100vh; } body >.container-fluid{ height:100vh; } .container-fluid{ display:flex; flex-direction: column; } #router-page-wrapper{ flex:1; justify-content:center; height:100%; } #router-page-wrapper > .router{ height:100%; width:100%; } #router-page-wrapper > .router >.container-fluid{ height:100%; } .row{ display:flex; flex-direction:row; flex-wrap:wrap; } .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{ display:flex; flex-direction:column; padding:0; margin-bottom:10px; } .navbar-brand{ display:none; } .navbar{ padding-left:0; background-color:#00A896; } .navbar-default{ background-color:#00A896; } # .navbar-nav >li:first-child >a { background-color: #028090; box-shadow: 0.5px 0px 0px #FFFFFF; font-family: Lobster !important; font-style: normal; font-weight: normal; font-size: 20px; #line-height: 9px; /* or 90% */ #display: flex; #align-items: center; #text-align: center; color: #FFFFFF !important; } .navbar-nav >li:first-child.active >a { #background-color: #028090; #color: #FFFFFF !important; } .navbar-nav >li:first-child >a { #background-color: #028090; # color: #FFFFFF !important; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { #background-color: #008375; #color: #FFFFFF !important; #font-family: Fjalla One; } .navbar-default .navbar-nav > li > a{ color: #FFFFFF !important; font-family: Fjalla One; text-align: center; } .navbar-nav >li:first-child.active >a, .navbar-nav >li:first-child.active >a:hover, .navbar-nav >li:first-child.active >a:focus,.navbar-nav >li:first-child >a:focus,.navbar-nav >li:first-child >a:hover,.navbar-nav >li:first-child >a { background-color: #028090; color: #FFFFFF !important; background-color: #028090; box-shadow: 0.5px 0px 0px #FFFFFF; font-family: Lobster !important; font-style: normal; font-weight: normal; font-size: 20px; } .navbar-nav >li >a:first-child { display:none; } #row-content{ margin-left:0; margin-right:0; margin-bottom:auto; } #column-panel{ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25); background-color:white; } #column-content{ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25); background-color:white; } #column-title{ width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; } #row-title{ display:flex; height:30vh; width:100vw; margin-top:-30px; margin-left:-30px; margin-right:0; background: #F9F3F3; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 0px 0px 10px 10px; } #column-title > h1{ font-family: Lobster !important; color:#028090; font-size:52px; } #row-tiles{ display:flex; justify-content:center; margin-top:30px; padding:5px; min-height:400px; } .column-tile{ height:300px; min-height:250px; min-width:210px; display:flex; flex-direction:column; width:25%; margin-left:15px; margin-right:15px; background: #00A896; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px; } #row-tiles > .column-tile:nth-child(2){ align-self:flex-end; background-color:#028090; } .column-tile > div{ height:100%; width:100%; display:flex; justify-content:space-between; padding-top:20px; padding-bottom:15px; flex-direction:column; align-items:center; } .column-tile > div >div { text-align:center; font-size:25px; color:white; font-family: Fjalla One; } .content-wrapper{ padding-top:10px; padding-bottom:10px; padding-left:5px; padding-right:5px; } .panel-title{ display:flex; height:40px; background-color:#028090; color:white; justify-content:center; align-items:center; font-family:Fjalla One; } #row-login{ max-width:600px; min-width:300px; min-height:300px; align-self:center; } #row-register{ max-width:600px; align-self:center; } #column-login > .well{ display:flex; flex-direction:column; background-color:#00A896; color:white; border:none; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } #regform{ display: flex; justify-content: center; } #submit,#loginBtn{ margin-top:20px; align-self:center; min-width:25%; max-width:40%; background-color:#028090; color:white; font-weight:bold; border:none; box-shadow: 0px 4px 4px rgb(255 255 255 / 25%); } .nav-tabs{ color:white; background-color:#028090; border-bottom:#028090; } .nav-tabs > li{ margin-bottom:0; } .nav-tabs > li > a{ color:white; background-color:#028090; border:none; border-radius:0; font-family:Fjalla One; } .nav-tabs > li > a:hover { color:white; background-color:#028090; border:none; } .nav-tabs > li > a:focus { color:white; background-color:#028090; border:none; } .nav-tabs > li { border:none; border-radius:0; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ color:#028090; background-color:white; border:none; border-radius:0; } #row-footer{ height:50px; border-top:2px solid white; margin-top:auto; } #column-copyright{ padding-left:15px; margin:0; } #column-copyright > span{ height:100%; color:#00a896; } table.dataTable tr:nth-child(even){ background-color:#C7F9CC!important; } table.dataTable tr:nth-child(odd){ background-color:#A7D7AC !important; } table.dataTable th{ background-color:white !important; } .datatables .dataTables_wrapper .dataTables_paginate a{ border:none; } .datatables .dataTables_wrapper .dataTables_paginate span > a:hover,.datatables .dataTables_wrapper .dataTables_paginate span > a.current,.datatables .dataTables_wrapper .dataTables_paginate span > a.current:hover,.datatables .dataTables_wrapper .dataTables_paginate > .previous:hover,.datatables .dataTables_wrapper .dataTables_paginate > .next:hover { color:white !important; background:#05668dff !important; border:none; box-shadow: 0.5px 0px 0px #FFFFFF; } .datatables .dataTables_wrapper .dataTables_paginate .previous.disabled,.datatables .dataTables_wrapper .dataTables_paginate .next.disabled{ display:none!important; } @media only screen and (max-width: 767px) { body >.container-fluid{ height:auto; min-height:100vh; } .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{ width:100%; } #column-panel{ min-height:500px; } #column-content{ min-height:500px; } #row-title{ display:none; } } @media only screen and (min-width: 768px) { .navbar-nav{ width:100%; margin-left:-15px; display:flex !important; } .navbar-nav > li:nth-last-of-type(2) { margin-left:auto; } .navbar-nav > li:last-of-type,.navbar-nav > li:nth-last-of-type(2) { align-self:flex-end; #float:right !important; } #row-content{ justify-content:space-between; } #column-panel{ width:23%; height:900px; } #column-content{ width:73%; min-height:900px; } }