html,body {min-height: 100vh;margin:0;padding:0;overflow-x: hidden;}
body{width:100%;font-family: monospace;background: url(../img/bg.png) repeat;font-size:14px;}

body::-webkit-scrollbar-track {	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);	border-radius: 0px;background-color: #ececec;}
body::-webkit-scrollbar {width: 6px;background-color: #dedede;box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
body::-webkit-scrollbar-thumb {	border-radius: 0px;	box-shadow: inset 0 0 6px rgba(0, 75, 70, 0.8);background: #009688;-moz-box-shadow: inset 0 0 6px rgba(0, 75, 70, 0.8);}

*::-webkit-scrollbar-track {	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);	border-radius: 0px;background-color: #ececec;}
*::-webkit-scrollbar {width: 6px;background-color: #dedede;box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
*::-webkit-scrollbar-thumb {	border-radius: 0px;	box-shadow: inset 0 0 6px rgba(0, 75, 70, 0.8);background: #009688;-moz-box-shadow: inset 0 0 6px rgba(0, 75, 70, 0.8);}

#sidebar::-webkit-scrollbar,#sidebar-collapsed::-webkit-scrollbar {display:none;}
h1 {font-size: 28px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

a {text-decoration: none;color:#333;}
a:hover {text-decoration: none;color:#009688;}

.main {position:relative;padding:0;min-height: calc(100vh - 50px);}
.warapper {position: relative;max-width:1100px;float: none;margin: 0 auto;}
header {width:100%;background: #009688;color:#FFFFFF;padding: 0;}
.header {position: relative;max-width:1100px;height: 60px;margin: 0 auto;}
.logo {position: relative;float: left;width:250px;margin-right: 20px;height: 40px;padding: 10px 5px;}
.logo img {width:auto;height: 40px;}
.menu {position: relative;float: left;}
.menu a {font-size: 20px;line-height: 40px;padding: 15px 20px 5px 20px;color: #FFF;position: relative;float: left;}
a.active {background: #007d72;}
.menu a:hover {background: #007368;}
#serverTime {position: relative;float: right;line-height: 18px;padding: 15px 0 10px 0;width: 150px;height: 35px;text-align:center;margin-left:10px;}
#serverTime span {background: #ffffff;color: #007d72;float: right;width: 100%;height: 20px;line-height: 20px;text-align:center;font-weight: bold;}
.navigation {position: relative;font-size:16px;height: 40px;margin:0;padding: 0 10px;line-height:40px;color: #007d72;}
.content {position: relative;margin: 0;padding: 15px;min-height: calc(100vh - 215px);padding-bottom:100px;display: block;background: #FFF;}
.left-sidebar {position: relative;float: left;width: 250px;padding:5px;margin:0;}
.right-sidebar {position: relative;float: right;width: 160px;padding:5px;margin:0;}
.left-sidebar title {position:relative;width:calc(100% - 10px);height:20px;line-height: 20px;background: #00ab9b;color:#FFF;font-size: 16px;padding:5px;text-align: center;display: block;}
.left-sidebar widget {position:relative;width:100%;display: block;margin-bottom: 1rem}
.right-sidebar title {position:relative;width:calc(100% - 10px);height:20px;line-height: 20px;background: #00ab9b;color:#FFF;font-size: 16px;padding:5px;text-align: center;display: block;}
.right-sidebar widget {position:relative;width:100%;display: block;margin-bottom: 1rem}
.posts {position: relative;float: left;width: 100%;padding:5px;margin: 0 10px;}
.open_video {position:absolute;top:0;left:0;right:0;bottom:0;border: 0;width: 100%;height: 100%;cursor:pointer;}
.open_video:hover {position:absolute;top:0;left:0;right:0;bottom:0;border: 0;width: 100%;height: 100%;cursor:pointer;background: rgb(35 35 35 / 0.25);color: #fff;}
.open_video:hover::after {content: "\f01d";color: #00ab9b;width: 44px;height: 44px;text-align: center;line-height: 44px;font: normal normal normal 44px/1 FontAwesome;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;position: absolute;top: calc(50% - 22px);left: calc(50% - 22px);background:#FFF;border-radius:50%;}
.footer-desclaimer {position: absolute;bottom: 40px;right:0px;left:0px;height:30px;padding: 10px 15px;background: #009688;font-size:14px;line-height: 15px;color: #FFFFFF;text-align: center;overflow: hidden;}
.footer {position: absolute;bottom: 0px;right:0px;left:0px;height:20px;padding: 10px 15px;background: #00ab9b;line-height: 20px;color: #FFFFFF;}

select {font-family: monospace;position: relative;float: left;padding: 5px 10px;width: calc(100% - 190px);max-width:500px;margin: 0;font-size: 18px;line-height: 20px;}
input[type="number"] {width: 30px;padding: 2px 0 2px 2px;height: 10px;font-family: monospace;border-radius: 0;line-height: 10px;font-size: 12px;border: 1px solid #999;text-align: right;}
input[type="text"] {font-family: monospace; background: rgb(255, 255, 255);border: 0;padding: 5px 10px;width: calc(100% - 230px);font-size: 15px;line-height: 20px;}
input[type="date"] {width: 135px !important;padding-right: 5px !important;}
input[type="time"] {width: 75px !important;padding-right: 0px !important;}
input[type="submit"] {background: #17a2b8;width: fit-content;padding: 5px 15px;color: #FFFFFF;border: 0;border-radius: 0px;font-size: 18px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);cursor: pointer;font-family: monospace;}
input[type="submit"]:hover {background : #138496;border-color : #117a8b;}
input[type="submit"]:disabled {background: #607D8B;cursor: not-allowed;}
input:disabled {cursor: not-allowed;}

.btn-info {color: #fff;background-color: #17a2b8;border-color: #17a2b8;}
.btn:hover {color: #212529;text-decoration: none;}
.btn-info:hover {color: #fff;background-color: #138496;border-color: #117a8b;}

.row {position: relative;display: flex;padding: 1rem;width: calc(100% - 2rem);height: fit-content;}
.col-1, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6 {position: relative;float:left;display:inline-block;}
.col-1 {width:100%;}
.col-1-2 {width:50%;}
.col-1-3 {width:33.33333%;}
.col-1-4 {width:25%;}
.col-1-5 {width:20%;}
.col-1-6 {width:16.66667%;}

.h-100 {height:100%;}
.w-100 {width:100%;}

/* Padding */
.p-0 {padding: 0 !important;}
.p-1 {padding: 0.5rem !important;}
.p-2 {padding: 1rem !important;}
.p-3 {padding: 1.5rem !important;}
.p-4 {padding: 2rem !important;}
.px-0 {padding-left: 0 !important;padding-right: 0 !important;}
.px-1 {padding-left: 0.5rem !important;padding-right: 0.5rem !important;}
.px-2 {padding-left: 1rem !important;padding-right: 1rem !important;}
.px-3 {padding-left: 1.5rem !important;padding-right: 1.5rem !important;}
.px-4 {padding-left: 2rem !important;padding-right: 2rem !important;}
.py-0 {padding-top: 0 !important;padding-bottom: 0 !important;}
.py-1 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}
.py-2 {padding-top: 1rem !important;padding-bottom: 1rem !important;}
.py-3 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}
.py-4 {padding-top: 2rem !important;padding-bottom: 2rem !important;}
.pl-0 {padding-left: 0 !important;}
.pl-1 {padding-left: 0.5rem !important;}
.pl-2 {padding-left: 1rem !important;}
.pl-3 {padding-left: 1.5rem !important;}
.pl-4 {padding-left: 2rem !important;}
.pr-0 {padding-right: 0 !important;}
.pr-1 {padding-right: 0.5rem !important;}
.pr-2 {padding-right: 1rem !important;}
.pr-3 {padding-right: 1.5rem !important;}
.pr-4 {padding-right: 2rem !important;}
.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: 0.5rem !important;}
.pt-2 {padding-top: 1rem !important;}
.pt-3 {padding-top: 1.5rem !important;}
.pt-4 {padding-top: 2rem !important;}
.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: 0.5rem !important;}
.pb-2 {padding-bottom: 1rem !important;}
.pb-3 {padding-bottom: 1.5rem !important;}
.pb-4 {padding-bottom: 2rem !important;}

/* Margin */
.m-0 {margin: 0 !important;}
.m-1 {margin: 0.5rem !important;}
.m-2 {margin: 1rem !important;}
.m-3 {margin: 1.5rem !important;}
.m-4 {margin: 2rem !important;}
.px-0 {margin-left: 0 !important;margin-right: 0 !important;}
.mx-1 {margin-left: 0.5rem !important;margin-right: 0.5rem !important;}
.mx-2 {margin-left: 1rem !important;margin-right: 1rem !important;}
.mx-3 {margin-left: 1.5rem !important;margin-right: 1.5rem !important;}
.mx-4 {margin-left: 2rem !important;margin-right: 2rem !important;}
.my-0 {margin-top: 0 !important;margin-bottom: 0 !important;}
.my-1 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}
.my-2 {margin-top: 1rem !important;margin-bottom: 1rem !important;}
.my-3 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.my-4 {margin-top: 2rem !important;margin-bottom: 2rem !important;}
.ml-0 {margin-left: 0 !important;}
.ml-1 {margin-left: 0.5rem !important;}
.ml-2 {margin-left: 1rem !important;}
.ml-3 {margin-left: 1.5rem !important;}
.ml-4 {margin-left: 2rem !important;}
.mr-0 {margin-right: 0 !important;}
.mr-1 {margin-right: 0.5rem !important;}
.mr-2 {margin-right: 1rem !important;}
.mr-3 {margin-right: 1.5rem !important;}
.mr-4 {margin-right: 2rem !important;}
.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: 0.5rem !important;}
.mt-2 {margin-top: 1rem !important;}
.mt-3 {margin-top: 1.5rem !important;}
.mt-4 {margin-top: 2rem !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: 0.5rem !important;}
.mb-2 {margin-bottom: 1rem !important;}
.mb-3 {margin-bottom: 1.5rem !important;}
.mb-4 {margin-bottom: 2rem !important;}

.flex {display:flex;}

.position-relative {position: relative;}
.position-fixed {position: fixed;}
.position-absolute {position: absolute;}

.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}

.bold {font-weight: 700!important;}

.border-0 {border: 0px !important;}

/* Backgrounds */
.bg-0 {background: #3C5663;border:1px solid #3C5663;color: #FFFFFF;}
.bg-1 {background: #009688;border:1px solid #009688;color: #FFFFFF;}
.bg-2 {background: #FFC107;border:1px solid #FFC107;color: #FFFFFF;}
.bg-3 {background: #F14538;border:1px solid #F14538;color: #FFFFFF;}
.bg-4 {background: #17609C;border:1px solid #17609C;color: #FFFFFF;}
.bg-5 {background: #FF9800;border:1px solid #FF9800;color: #FFFFFF;}
.bg-6 {background: #FFFFFF;border:1px solid #333333;color: #333333;}
.bg-1-light {background: #00ab9b;border:1px solid #00ab9b;color: #FFFFFF;}
.bg-light-grey {background: #EFEFEF;}

.p-btn {margin: 0 0 1rem 1rem;height: 45px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);border-radius: 25px;line-height: 30px;font-size: 20px;}
.p-btn l {width: 30px;text-align: center;border-right:1px solid #fff;position: relative;float: left;display: inline-block;padding: 8px 8px 8px 12px;font-size: 30px;line-height: 28px;}
.p-btn c {width: calc(100% - 143px);text-align: left;position: relative;float: left;display: inline-block;padding: 8px 20px;}
.p-btn r {width: 30px;text-align: center;border-left:1px solid #fff;position: relative;float: right;display: inline-block;padding: 8px 12px 8px 8px;line-height: 30px;font-size: 24px;}

.fm-btn {margin: 0 0 1rem 1rem;height: 50px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);border-radius: 25px;line-height: 30px;font-size: 22px;}
.fm-btn l {width: 40px;text-align: center;border-right:1px solid #fff;position: relative;float: left;display: inline-block;padding: 10px;}
.fm-btn c {width: calc(100% - 163px);text-align: left;position: relative;float: left;display: inline-block;padding: 10px 20px;}
.fm-btn r {width: 40px;text-align: center;border-left:1px solid #fff;position: relative;float: right;display: inline-block;padding: 10px;}

.plus-btn {background: #009688;color: #FFFFFF;margin-left: 5px;font-size: 24px;padding: 0px 6px;padding-top: 4px;}
.plus-btn:hover {background: #ffc107;color: #FFFFFF;text-decoration: none;}
.plus-btn a, .plus-btn a:hover {color: #FFFFFF;text-decoration: none;}

.search-btn {position:absolute;right:0;top: -2px;background: #009688;color: #ffffff;margin-left: 5px;font-size: 28px;padding: 2px 5px 3px 6px;cursor: pointer;}
.search-btn:hover {background: #037d72;color: #FFFFFF;text-decoration: none;}

.close_btn {font-size: 25px;padding: 0 1rem;cursor:pointer;float: right;}
.close_btn:hover {transform: rotate(360deg);transition: all 0.5s ease-in-out 0s;}

.pagination {position: relative;display: inline-block;font-size: 16px;background: #009688;color: #FFFFFF;padding: 5px 10px;border-radius: 3px;}
.pagination.current {position: relative;display: inline-block;font-size: 16px;background: #F9BB00;color: #FFFFFF;padding: 5px 10px;border-radius: 3px;}
.pagination:hover {background: #037d72;}

/* Tables */

table {width: 100%;}
thead {background: #009688;color: #FFFFFF;}
table>thead>tr>td {padding: 10px;font-weight: 600;font-size: 18px;}
table>tbody>tr>td {padding: 5px 10px;font-size: 16px;background: #FFFFFF;border-bottom: 1px solid #7a909a}
tr:nth-child(even)>td {background-color: #F2F2F2;}

/* Responsive */
@media screen and (max-width:1650px) {
  .col-1-3, .col-1-4, .col-1-5, .col-1-6 {width: 50%;}
}
@media screen and (max-width:1200px) {
  .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6 {width: 100%;}
  .h-100 {height: inherit;}
}

@media screen and (max-width:1110px) {
  .right-sidebar {display:none;}
  .close_btn {padding: 0 0 0 10px;}
  .close_btn:hover {-webkit-transform: scale(1.5);transform: scale(1.5);}
  #serverTime {margin-right: 10px;}
}

@media screen and (max-width:960px) {
  .logo {height:30px;width:190px;}
  .logo img {height:30px;width:auto;}
  .header {height:50px;}
  .menu a {font-size: 16px;line-height: 24px;padding: 16px 12px 10px 12px;}
  #serverTime {padding: 10px 0 5px 0}
  .navigation {font-size: 14px;height: 30px;line-height: 30px;}
  .content {min-height: calc(100vh - 195px);}
  .content div {zoom: 95%;}
  h1 {font-size: 22px;}
  h2 {font-size: 20px;}
  h3 {font-size: 18px;}
  h4 {font-size: 16px;}
  h5 {font-size: 14px;}
  h6 {font-size: 13px;}
}

@media screen and (max-width:780px) {
  .row {padding-right:0;padding-left: 0;width:100%;}
  .left-sidebar {display:none;}
  .posts {margin:0;}
  .logo {height:20px;width:125px;}
  .logo img {height:20px;width:auto;}
  .header {height:40px;}
  .menu a {font-size: 14px;line-height: 24px;padding: 10px 10px 6px 10px;}
  #serverTime {zoom: 80%;}
  .navigation {font-size: 12px;height: 25px;line-height: 25px;}
  .content {min-height: calc(100vh - 180px);}
}