body{ background-color: #C7F9CC; height:100vh; } body >.container-fluid{ height:100vh; } .container-fluid{ display:flex; flex-direction: column; } .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; } #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; } .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; } .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) { .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; } } @media only screen and (min-width: 768px) { .navbar-nav{ width:100%; margin-left:-15px; display:flex !important; } .navbar-nav > li:last-of-type { align-self:flex-end; margin-left:auto; #float:right !important; } #row-content{ justify-content:space-between; } #column-panel{ width:23%; height:900px; } #column-content{ width:73%; min-height:900px; } }