#sidebar {position:fixed;display:block;float:left;background: #009688;width: 270px;height:100vh;margin:0;padding: 0;color:#FFFFFF;z-index:9999;}
.sidebar.logo {position:relative;width:250px;height: 40px;background: #037d72;box-shadow: 0px 2px 2px #FFFFFF57;padding: 10px;}
.sidebar.menu {position:relative;width:250px;height: auto;}
.sidebar.menu a {text-decoration: none;color:#FFFFFF;}
.sidebar.menu t {font-weight: bold;font-size: 16px;width: 240px;height: 20px;padding: 10px 15px;position: relative;line-height: 20px;float: left;border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
.sidebar.menu t:hover {background: #055f57;}
.sidebar.menu opt {background: #037d72;font-size: 15px;width: 270px;position: relative;line-height: 20px;float: left;border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding:5px 0;}
.sidebar.menu opt>a {position:relative;float:left;height:20px;line-height: 20px;width: 220px;padding: 5px 25px;}
.sidebar.menu opt>a:hover {background: #055f57;}
#sidebar i {width: 12px;text-align: center;}
#sidebar-collapsed {position:fixed;display:none;float:left;background:#009688;width:60px;height:100vh;margin:0;padding:0;color:#FFFFFF;z-index:9999;}
.sidebar-collapsed.logo {position:relative;width:40px;height: 40px;background: #037d72;box-shadow: 0px 2px 2px #FFFFFF57;padding: 10px;}
.sidebar-collapsed.menu {position:relative;width:40px;height: auto;}
.sidebar-collapsed.menu t {font-weight: bold;font-size: 30px;width: 40px;height: 40px;padding: 10px;position: relative;line-height: 40px;float: left;border-bottom: 1px solid rgba(255, 255, 255, 0.25);text-align: center;color: #FFFFFF;}
.sidebar-collapsed.menu t:hover {background: #055f57;}
.sidebar-collapsed.menu opt {background: #037d72;width: 50px;position: relative;line-height: 25px;float: left;border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding: 5px;font-size: 25px;text-align: center;}
.sidebar-collapsed.menu opt>a {position:relative;float:left;height: 30px;line-height: 30px;width: 40px;padding: 5px;color: #fefefe;}
.sidebar-collapsed.menu opt>a:hover {background: #055f57;}
.collapsing-btn{position: absolute;background: #009688;right: -28px;top: 0;width: 12px;height: 30px;padding: 15px 8px;font-size: 20px;border-radius: 0 0 15px 0;text-align: center;}
.main {position:relative;padding:0 0 0 270px;min-height: calc(100vh - 50px);}
a {text-decoration: none;color:#333;}
a:hover {text-decoration: none;color:#009688;}
.header {position: relative;height: 40px;padding:10px 30px;background: #f7f7f7;text-align:right;line-height:40px;}
.admin-logout {padding:0 10px;font-size:18px;float:right;}
.admin-notifications {padding:0 10px;font-size:18px;float:right;position: relative;}
.admin-nav {position: relative;float: right;display: inline-block;background: #FFFFFF;padding: 5px;border-radius: 10px;height: 20px;line-height: 20px;color: #009688;font-size: 15px;margin: 4px 0;border: 2px solid #009688;cursor:pointer;}
.admin-nav:hover {background:#009688;color:#FFFFFF;}
.admin-menu {display:none;}
.admin-menu {position: absolute;width: 160px;text-align: left;background: #FFFFFF;right: -5px;top: 43px;border: 1px solid #009688;color: #333;z-index:9998;}
.admin-menu > ul {padding: 0px;margin: 0px;}
.admin-menu > ul > a li {padding: 5px 10px;list-style: none;}
.admin-menu > ul > a li:hover {background: #009688;color:#FFFFFF;}
#a-notifications {position: absolute;width: 300px;height:400px;text-align: left;background: #FFFFFF;right: -5px;top: 43px;border: 1px solid #009688;color: #333;z-index:9998;}
#a-notifications alert {padding:10px;font-size: 14px;}
.content {position: relative;padding:10px 30px 112px 10px;min-height: calc(100vh - 182px);display: block;width: calc(100% - 40px);}
.setting-col {position: relative;display: inline-block;float: left;width: calc(100% - 2rem);height: 100%;padding: 1rem;font-size: 16px;}
hr {width:100%;height:0px;background: #FFFFFF;}
hr {width:100%;height:0px;background: #607D8B;}
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="email"] {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="url"] {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="password"] {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;}
select {font-family: monospace;background: rgb(255, 255, 255);padding: 5px 20px 5px 10px;width: fit-content;font-size: 15px;line-height: 20px;max-width: calc(100% - 330px);}
.setting-col label {position: relative;float: left;display: inline-block;padding: 5px 10px;width: 180px;margin: 0;color: #FFFFFF;font-size: 18px;line-height: 20px;}
.setting-col.bg-0 label {position: relative;float: left;display: inline-block;padding: 5px 10px;width: 200px;margin: 0;background: #FFFFFF;color:#3C5663;font-size: 18px;line-height: 20px;}
.setting-col.bg-0 stats {font-family: monospace; padding: 5px 10px;width: calc(100% - 250px);font-size: 16px;line-height: 20px;font-weight: 600;}
.w-settings-col {position: relative;display: inline-block;float: left;width: calc(100% - 2rem);height: 100%;padding: 1rem;font-size: 16px;}
.w-settings-col input {font-family: monospace;background: rgb(255, 255, 255);border: 0;padding: 5px 10px;width: calc(100% - 300px);font-size: 15px;line-height: 20px;}
.w-settings-col textarea {font-family: monospace;background: rgb(255, 255, 255);border: 0;padding: 5px 10px;width: calc(100% - 300px);font-size: 15px;line-height: 20px;}
.w-settings-col label {position: relative;float: left;display: inline-block;padding: 5px 10px;width: 250px;margin: 0;color: #FFFFFF;font-size: 18px;line-height: 20px;}
.w-settings-col input[type="checkbox"] {width: auto;margin: 0;}
.w-settings-col input[type="submit"] {background: #365855;width: fit-content;padding: 5px 15px;color: #FFFFFF;border: 2px solid #FFFFFF;border-radius: 20px;font-size: 18px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);cursor:pointer;}
.w-settings-col input[type="submit"]:hover {background: #FFFFFF;width: fit-content;padding: 5px 15px;color: #037d72;border: 2px solid #037d72;border-radius: 20px;font-size: 18px;}

.form-col {position: relative;display: inline-block;float: left;width: calc(100% - 2rem);height: 100%;padding: 1rem;font-size: 16px;}
.form-col input {font-family: monospace;background: rgb(255, 255, 255);border: 0;padding: 5px 10px;width: calc(100% - 350px);font-size: 15px;line-height: 20px;}
.form-col label {position: relative;float: left;display: inline-block;padding: 5px 10px;width: 300px;margin: 0;color: #FFFFFF;font-size: 18px;line-height: 20px;}
.form-col textarea {font-family: monospace;background: rgb(255, 255, 255);border: 0;padding: 5px 10px;width: calc(100% - 350px);font-size: 15px;line-height: 20px;}
.form-col input[type="checkbox"] {width: auto;margin: 0;}
.form-col.bg-1 a {color: #ffffff;text-decoration: none;line-height: 30px;padding: 0 5px;}
.form-col.bg-1 a:hover {color: #FFC107;}

.form-col input[type="submit"].submit_btn {background: #17a2b8;font-family: monospace;width: fit-content;padding: 5px 15px;color: #FFFFFF;border: 1px solid #FFFFFF;border-radius: 0px;font-size: 18px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);cursor: pointer;}
.form-col .reset_btn {background: #F44336;font-family: monospace;width: fit-content;padding: 5px 15px;color: #FFFFFF;border: 1px solid #FFFFFF;border-radius: 0px;font-size: 18px;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);cursor: pointer;margin-left:10px;}
.form-col input[type="submit"].submit_btn:hover {background : #138496;border-color : #117a8b;}
.form-col .reset_btn:hover {background : #e62517;border-color : #c7281c;}

i.edit-option {background: #FFC107;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
i.active-option {background: #009688;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
i.other-option {background: #FF9800;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
i.delete-option {background: #F44336;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
.footer {position: absolute;bottom: 0px;right:0px;left:0px;min-height:20px;padding:10px 30px;background: #00ab9b;line-height: 20px;color: #FFFFFF;}


.media-submit, input[type="submit"].media-submit {background: #009688;font-family: monospace;border-radius: 4px;border: 0;font-size: 18px;line-height: 28px;display: inline-block;margin: 0;padding: 5px;color: #FFFFFF;}
.media-submit:hover, input[type="submit"].media-submit:hover {background: #0a7167;}

input[type="submit"].media-submit:disabled {background: #607D8B;cursor: not-allowed;}
input:disabled {cursor: not-allowed;opacity: 0.75;}

.btn {display: inline-block;font-weight: 400;color: #212529;text-align: center;vertical-align: middle;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: transparent;border: 1px solid transparent;padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.btn-info {color: #fff;background-color: #17a2b8;border-color: #17a2b8;}
.bold {font-weight: 700!important;}
.btn:hover {color: #212529;text-decoration: none;}
.btn-info:hover {color: #fff;background-color: #138496;border-color: #117a8b;}

.js .inputfile {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}
.inputfile + label {text-overflow: ellipsis;white-space: nowrap;cursor: pointer;display: inline-block;overflow: hidden;box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);}
.no-js .inputfile + label {display: none;}
.inputfile:focus + label,
.inputfile.has-focus + label {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px;}
.inputfile + label * {/* pointer-events: none; *//* in case of FastClick lib use */}
.inputfile + label svg {width: 1em;height: 1em;vertical-align: middle;fill: currentColor;margin-top: -0.25em;/* 4px */margin-right: 0.25em;/* 4px */}
.inputfile {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}

#disabled-entry::before {content: "\f070";background: #FF9800;padding: 4px;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 0;display: inline-block;font: normal normal normal 14px/1 FontAwesome;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#disabled-entry:hover::before {content: "\f06e";background: #009688;}

#enabled-entry::before {content: "\f06e";background: #4CAF50;padding: 4px;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;display: inline-block;font: normal normal normal 14px/1 FontAwesome;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#enabled-entry:hover::before {content: "\f070";background: #FF9800;}

#delete-entry::before {content: "\f1f8";background: #F44336;padding: 4px;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;display: inline-block;font: normal normal normal 14px/1 FontAwesome;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#delete-entry:hover::before {content: "\f1f8";background: #C7190C;}

.edit-option {background: #FFC107;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
.active-option {background: #009688 !important;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
.other-option {background: #FF9800;padding: 4px;font-size: 90%;border-radius: 4px;color: #fff;width: 16px;height: 16px;text-align: center;line-height: 16px;margin: 2px auto;}
.delete-option {background: #F44336;font-size: 16px;border-radius: 3px;color: #fff;width: 22px;height: 22px;text-align: center;line-height: 18px;margin: 0;border: 0;padding: 2px;cursor:pointer;}

.attachement {background:#FFFFFF;box-shadow: 0 0 0 3px #fff;width: calc(6.25% - 16px);position: relative;overflow: hidden;padding-top: 6.25%;float: left;margin: 8px;}
.attachement img {background:#FFFFFF;width: 100% !important;height: auto !important;position: absolute;top: 0;bottom: 0;right: 0;left: 0;overflow: hidden;min-height: 100%;border: 0 !important;}

.selected {box-shadow: 0 0 0 3px #009688;}

table.custom_table td {background: #f6f6f6 !important;border: 0;padding: 3px 5px;}

table.custom_table {max-width: 520px;}

/* Responsive */
@media screen and (max-width:1380px) {
  .attachement {width: calc(8.33333% - 16px);padding-top: 8.33333%;}
  #sidebar {display: none;}
  #sidebar-collapsed {display:block;}
  .main {position:relative;padding:0 0 0 60px;}
}
@media screen and (max-width:1080px) {
  .attachement {width: calc(12.5% - 16px);padding-top: 12.5%;}
  #sidebar {display: none !important;}
  #sidebar-collapsed {display:block !important;}
  .main {position:relative;padding:0 0 0 60px !important;}
  .collapsing-btn {display: none !important;}
  .header {position:relative;padding:10px;}
  .content {padding-right:0 !important;padding-left:0 !important;width:100%;}
  .hideInMobile {display:none;}
  .admin-nav {position: relative;float: right;display: inline-block;background: none;padding: 0;border-radius: 0;height: 40px;line-height: 20px;color: #333;font-size: 15px;margin: 0;border: 0;cursor:pointer;}
  .admin-nav>i {line-height: 38px;font-size: 22px;}
  .admin-nav:hover {background: none;color: #037d72 !important;}
  h1 {font-size: 25px;}
  h2 {font-size: 22px;}
  h3 {font-size: 18px;}
  h4 {font-size: 16px;}
  h5 {font-size: 15px;}
  h6 {font-size: 14px;}

}

@media screen and (max-width:780px) {
  .spanInMobile {width: 250px;overflow:hidden;font-size: 90%;height: 16px !important;}
  .attachement {width: calc(16.66667% - 16px);padding-top: 16.66667%;}
 .content div {zoom: 90%;}
 table>thead>tr>td {font-size: 17px !important;}
 table>tbody>tr>td {font-size: 15px !important;}
 table>tbody>tr>td i.fa.fa-user {font-size: 18px !important;}
}