/*
 * BROWSER RESET
 */

abbr[title], acronym[title] {
    text-decoration: unset;
}

/*
 * BASE
 */

body {
    color: #444444;
}

/*
 * PAGE HEADER
 */

.page-header {
    background: #a9cae6;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 8px),
    radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0) 100%),
    #a9cae6;
}

.page-header .page-header-top,
.page-header .page-header-menu {
    background: none;
}

@media (max-width: 480px) {
    .page-header .top-menu, .page-header .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle,
    .page-header-fixed-mobile .page-header .top-menu {
        background: none;
    }
}

.page-header,
.page-header .page-header-top,
.page-header .page-header-top .page-logo {
    height: auto;
}

.page-header .page-header-top .page-logo .logo-default {
    margin: 3px 0 0;
    height: 38px;
    width: auto;
}

.page-header .page-header-top .top-menu {
    margin: 0;
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > i {
    color: rgba(0, 0, 0, 0.7);
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown:active .dropdown-toggle,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown:focus .dropdown-toggle,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown:active .dropdown-toggle > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown:focus .dropdown-toggle > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle > .username,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle > i,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user:hover > .dropdown-toggle > .username,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user:hover > .dropdown-toggle > i {
    color: rgba(0, 0, 0, 1);
    background: none;
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i {
    font-size: 18px; /*optimal simple-line-icons size*/
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown.username-menu {
    padding-top: 9px;
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown.username-menu > .dropdown-toggle {
    display: table-cell;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50px !important;
    background: #202f3f;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    text-transform: uppercase;
}

.page-header .page-header-top .menu-toggler {
    margin: 0 0 0 3px;
    padding: 14px 5px 14px 8px;
    background: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    width: auto;
}

.page-header .page-header-top .menu-toggler i {
    line-height: 1;
}

.page-header .page-header-menu {
    height: auto;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
    padding: 6px 8px 5px;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li:not(:first-child) {
    margin-left: 3px;
}

.page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li > a,
.page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li > a > i {
    color: rgba(0, 0, 0, 0.7);
}

.page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li > a {
    background: rgba(255, 255, 255, 0.2);
}

.lang_switch_container {
    display: block;
    float: right !important;
    margin-right: 20px;
    padding-top: 16px;
}

.dev-server-note {
    padding: 14px 0 0 0;
    float: left;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

/*
 * COMPONENTS
 */

.date-picker {
    width: calc(100% - 60px);
    display: inline-block;
    position: relative;
    z-index: 100;
}

.date-picker-icon {
    width: 18px;
    height: 18px;
    display: inline;
    margin-left: 4px;
}

.btn[data-toggle]:not(.active) .visible-active,
.btn[data-toggle].active .hidden-active {
    display: none !important;
}

.inplace-badge {
    /*
     * Important: you must set the same color AND background color because the box-shadow inherits the fg color!
     */
    display: inline-block;
    margin: 0 0.4em; /*offset horizontal box-shadow*/
    border: none !important;
    padding: 0 0.1em;
    border-radius: 10em !important;
    box-shadow: 0 0 0 .4em;
    white-space: nowrap;
    background: #777;
    color: #777;
    line-height: 0;
}

.inplace-badge > .content {
    color: #fff;
}

/*
 * TABLES
 */

/*
 * Cell Classes - see https://datatables.net/manual/styling/classes#Cell-classes
 */

table th.dt-left,
table td.dt-left {
    text-align: left;
}

table th.dt-center,
table td.dt-center {
    text-align: center;
}

table th.dt-right,
table td.dt-right {
    text-align: right;
}

table th.dt-justify,
table td.dt-justify {
    text-align: justify;
}

table th.dt-nowrap,
table td.dt-nowrap {
    white-space: nowrap;
}

table thead th.dt-head-left,
table thead td.dt-head-left,
table tfoot th.dt-head-left,
table tfoot td.dt-head-left {
    text-align: left;
}

table thead th.dt-head-center,
table thead td.dt-head-center,
table tfoot th.dt-head-center,
table tfoot td.dt-head-center {
    text-align: center;
}

table thead th.dt-head-right,
table thead td.dt-head-right,
table tfoot th.dt-head-right,
table tfoot td.dt-head-right {
    text-align: right;
}

table thead th.dt-head-justify,
table thead td.dt-head-justify,
table tfoot th.dt-head-justify,
table tfoot td.dt-head-justify {
    text-align: justify;
}

table thead th.dt-head-nowrap,
table thead td.dt-head-nowrap,
table tfoot th.dt-head-nowrap,
table tfoot td.dt-head-nowrap {
    white-space: nowrap;
}

table tbody th.dt-body-left,
table tbody td.dt-body-left {
    text-align: left;
}

table tbody th.dt-body-center,
table tbody td.dt-body-center {
    text-align: center;
}

table tbody th.dt-body-right,
table tbody td.dt-body-right {
    text-align: right;
}

table tbody th.dt-body-justify,
table tbody td.dt-body-justify {
    text-align: justify;
}

table tbody th.dt-body-nowrap,
table tbody td.dt-body-nowrap {
    white-space: nowrap;
}

/*
 * JTABLE
 */

/*
 * JTABLE: Title
 */

div.jtable-main-container div.jtable-title {
    padding: 10px;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar {
    display: block;
    padding: 5px 0;
    margin: 0;
}

/*
 * JTABLE: Title > Toolbar Items
 */

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item {
    /* Copy `.btn` styles */
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    white-space: nowrap;
    /*padding: 6px 12px;*/
    /*font-size: 14px;*/
    /*line-height: 1.42857;*/
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Copy `.btn-default` styles */
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    /* Copy `.btn-sm` styles */
    padding: 3px 9px;
    font-size: 13px;
    line-height: 1.5;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item:hover {
    /* Copy `.btn:hover` styles */
    transition: all .3s;
    text-decoration: none;
    /* Copy `.btn-default:hover` styles */
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-icon {
    /* Copy `.fa` styles */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-text {
    margin: 0;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-add-record {
    /* Copy `.btn` styles */
    padding: 6px 12px;
    font-size: 14px;
    /* Copy `.btn:not(.btn-sm):not(.btn-lg)` styles */
    line-height: 1.44;
    /* Copy `.btn.green-jungle:not(.btn-outline)` styles */
    color: #FFF;
    background-color: #26C281;
    border-color: #26C281;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-add-record:hover {
    /* Copy `.btn.green-jungle:not(.btn-outline):hover` styles */
    color: #FFF;
    background-color: #1e9765;
    border-color: #1c8f5f;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-add-record span.jtable-toolbar-item-icon {
    line-height: 1.24;
}

div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item.jtable-toolbar-item-add-record span.jtable-toolbar-item-icon:before {
    /* Copy `.fa-plus:before` styles */
    content: "\f067";
}

/*
 * JTABLE: Table
 */

div.jtable-main-container table.jtable thead {
    background: #575757;
    color: #ffffff;
}

div.jtable-main-container table.jtable thead > tr > th {
    border-left: 1px solid #676767;
    border-top: 4px solid #00abec;
    border-bottom: 2px solid #333333;
    padding: 10px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

div.jtable-main-container table.jtable thead th:first-child,
div.jtable-main-container table.jtable thead th.jtable-command-column-header + .jtable-command-column-header {
    border-left: none;
}

div.jtable-main-container table.jtable tbody > tr.jtable-data-row:not(.jtable-row-even) {
    /*These are the actual _even_ rows - see https://github.com/hikalkan/jtable/issues/2112*/
    background: #f7f7f8;
}

div.jtable-main-container table.jtable tbody > tr > td {
    padding: 18px 10px;
}

div.jtable-main-container table.jtable tbody > tr > td.jtable-command-column {
    padding-left: 0;
    padding-right: 0;
}

div.jtable-main-container table.jtable tbody > tr > td.jtable-command-column.dt-body-right {
    text-align: right;
}

div.jtable-main-container table.jtable tbody > tr.jtable-child-row {
    box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-top: 3px solid #00abec;
    border-bottom: 2px solid #00abec;
}

div.jtable-main-container table.jtable tbody > tr.jtable-child-row > td {
    box-shadow: inset 0 0 0 1px #e7e7e7;
}

/*
 * JTABLE: Table > Actions
 */

div.jtable-main-container table.jtable tbody > tr > td.actions-column {
    white-space: nowrap;
}

.custom-jtable-command-buttons div.jtable-main-container table.jtable tbody > tr > td .jtable-command-button {
    background: none;
    width: auto;
    height: auto;
}

div.jtable-main-container table.jtable tbody > tr > td .jtable-command-button:focus {
    outline: none;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon {
    color: #00abec;
    font-size: 27px;
    line-height: 1;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon:hover {
    color: #008bcc;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon.green {
    color: #26C281;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon.green:hover {
    color: #1e9765;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon.gray {
    color: #ccc;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon.gray:hover {
    color: #aaa;
}

div.jtable-main-container table.jtable tbody > tr > td i.action-icon.more-actions {
    position: relative;
    top: 1px;
}

/*
 * JTABLE: Bottom Panel
 */

div.jtable-main-container > div.jtable-bottom-panel {
    font-size: 0.9em;
    border-top: 1px solid #eee;
    padding: 8px 0;
    margin-top: 8px;
    opacity: 0.7;
}

div.jtable-main-container > div.jtable-bottom-panel:hover {
    opacity: 1;
    transition: all 0.3s;
}

/*
 * JTABLE: Bottom Panel > Pagination
 */

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
    padding: 6px 12px;
    line-height: 1.428571429;

    min-width: 31px;
    height: 30px;

    color: #337ab7;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled {
    cursor: default;
    color: #ccc;
    background-color: #fff;
    border-color: #ddd;
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
    z-index: 3;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
    cursor: default;
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number:not(.jtable-page-number-disabled):hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:not(.jtable-page-number-disabled):hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:not(.jtable-page-number-disabled):hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:not(.jtable-page-number-disabled):hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:not(.jtable-page-number-disabled):hover {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

/*
 * JTABLE: Bottom Panel > Pagination > Icons
 */

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    /* Copy `.fa` styles */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* hide element contents */
    text-indent: -9999px;
    line-height: inherit;
    position: relative;
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:before,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:before,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:before,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:before {
    /* restore icon visibility */
    position: absolute;
    text-indent: 0;
    display: block;

    font-size: 16px;
    margin-top: -3px;
    margin-left: -1px;
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:before {
    content: "\f100"; /* .fa-angle-double-left */
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:before {
    content: "\f101"; /* .fa-angle-double-right */
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:before {
    content: "\f104"; /* .fa-angle-left */
}

div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:before {
    content: "\f105"; /* .fa-angle-right */
}

/*
 * JTABLE: Bottom Panel > Pagination > Other
 */

div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page,
div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change {
    margin-left: 8px;
}

/*
 * JTABLE: Bottom Panel > Pagination > Select
 */

div.jtable-main-container > div.jtable-bottom-panel select {
    background-color: #fff;
    border-color: #ccc;
    height: 29px;
}

div.jtable-main-container > div.jtable-bottom-panel select:hover {
    cursor: pointer;
    transition: all .3s;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/*
 * JTABLE: Bottom Panel > Page Info
 */

div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area {
    padding-top: 8px;
}

div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-info {
    padding-top: 7px;
    margin-right: 5px;
    display: inline-block;
}

/*
 * JTABLE: Dialog Forms
 */

form.jtable-dialog-form {
    min-width: 300px;
}

form.jtable-dialog-form div.jtable-input-field-container {
    padding: 4px 0 5px 0;
    border-bottom: 1px solid #e7e7e7;
}

form.jtable-dialog-form div.jtable-input-label {
    padding: 2px 3px;
    font-size: 1em;
    color: #666;
    font-weight: bold;
}

form.jtable-dialog-form div.jtable-dropdown-input select {
    width: 100%;
    background-color: #fff;
    border-color: #ccc;
    height: 29px;
}

form.jtable-dialog-form div.jtable-dropdown-input select:hover {
    cursor: pointer;
    transition: all .3s;
    background-color: #e6e6e6;
    border-color: #adadad;
}

form.jtable-dialog-form div.jtable-textarea-input textarea {
    width: 100%;
}

form.jtable-dialog-form div.jtable-text-input input {
    width: 100%;
}

/*
 * JTABLE: Child Table Variation
 */

div.jtable-child-table-container table.jtable thead {
    background: #777777;
}

div.jtable-child-table-container table.jtable thead > tr > th {
    /*border-left: 1px solid #676767;*/
    border-top: none;
    /*border-bottom: 2px solid #333333;*/
    /*padding: 10px;*/
    /*text-align: center;*/
    /*text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);*/
}

div.jtable-main-container table.jtable tbody > tr > td {
    padding: 10px 10px;
}

/*
 * FULL-CALENDAR
 */

div.fc-toolbar.fc-header-toolbar > div.fc-center > h2 {
    font-size: 24px;
}

.fc .fc-list-view .fc-scroller {
    height: auto !important;
}

.fc.fc th.fc-day-header,
.fc .fc-basic-view th.fc-day-number,
.fc .fc-basic-view th.fc-week-number {
    padding-top: 8px;
    padding-bottom: 8px;
}

/*
 * FORMS
 */

.form-condensed .form-group {
    margin-bottom: 10px;
}

.form-condensed .form-group .mt-checkbox-inline,
.form-condensed .form-group .mt-radio-inline {
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * COLLAPSE
 */

.collapsing.collapse__fast-animation {
    transition: height 0.2s;
}

.collapsing.collapse__faster-animation {
    transition: height 0.1s;
}

.collapsing.collapse__no-animation {
    transition: height 0s;
}

a[data-toggle="collapse"] i.fa.collapse-arrow:before,
button[data-toggle="collapse"] i.fa.collapse-arrow:before {
    content: "\f106"; /*fa-angle-up*/
}

a[data-toggle="collapse"].collapsed i.fa.collapse-arrow:before,
button[data-toggle="collapse"].collapsed i.fa.collapse-arrow:before {
    content: "\f107"; /*fa-angle-down*/
}

a[data-toggle="collapse"] i.fa.collapse-tree-caret:before,
button[data-toggle="collapse"] i.fa.collapse-tree-caret:before {
    content: "\f0d7"; /*fa-caret-down*/
}

a[data-toggle="collapse"].collapsed i.fa.collapse-tree-caret:before,
button[data-toggle="collapse"].collapsed i.fa.collapse-tree-caret:before {
    content: "\f0da"; /*fa-caret-right*/
}

a[data-toggle="collapse"] i.fa.collapse-tree-plus:before,
button[data-toggle="collapse"] i.fa.collapse-tree-plus:before {
    content: "\f147"; /*fa-minus-square-o*/
}

a[data-toggle="collapse"].collapsed i.fa.collapse-tree-plus:before,
button[data-toggle="collapse"].collapsed i.fa.collapse-tree-plus:before {
    content: "\f196"; /*fa-plus-square-o*/
}

/*
 * MODALS
 */

.modal-content.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0.95);
    z-index: 10055; /*keep above other components*/
}

/*
 * MISC
 */

abbr[title].help {
    border-bottom: 3px dotted #bcdfff;
}

abbr[title].help:hover {
    border-bottom: 3px dotted #4bb3ff;
}

.jtable-data-row.unread .mark-unread {
    font-weight: bold;
}

/*
 * UTILITY
 */

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-pointer-events {
    pointer-events: none;
}

.no-select {
    user-select: none;
}

.opacity-0,
.transparent {
    opacity: 0;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50,
.semi-transparent {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-100,
.opaque {
    opacity: 1;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}