:root {
    --brand-color: #00b6b6;
    --brand-color-over: #008686;
    --dark-color: #888;
    --splitter-size: 6px;
    --code-tabs-size: 47px;
    --code-options-size: 45px;
    --help-width: 400px;
    --help-offset: -400px;
}

html, body {
    overscroll-behavior-x: none;
}

html, body, .wrapper, #app {
  height: 100% !important;
  margin: 0;
}

select {
    -webkit-appearance: none;
    
}

/* fix for sidebar margins when < 992 wide but > 768 */
@media (max-width: 991.98px) {

    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper {
/*        margin-left: 250px;*/
    }

    body:not(.sidebar-open) aside.main-sidebar{
        margin-left: -250px;
    }
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #000;
}

.dark-mode .popover .popover-header {
    background-color: #343a40;
    color: #fff;
}

.pages-view .container-fluid{
    max-width: 3000px;
    padding-left: 5vw;
    padding-right: 5vw;
}

.brand-link {
    height: 65px;
}

.main-sidebar .brand-link{
    padding-top: 0.9rem;
}

.main-header .brand-link{
    padding: 0.5rem 1rem;
}

.main-sidebar .brand-logo,
.main-header .brand-expand{
  font-size: 190%;
  width: 35px;
    padding: 6px;
  color: var(--brand-color);
}

.brand-text{
  color: var(--brand-color);
  font-weight: 200;
}

.main-sidebar .brand-logo{
font-size: 110%;
  padding-left: 4px;
  padding-top: 6px;
  color: #fafafa;
}

.main-sidebar .brand-link {
    margin-inline-start: 10px;
    /*margin-inline-end: 10px;*/
    margin-top: 5px;
    display: inline-block;
    /*border: solid 1px var(--brand-color-over);*/
    /*width: 35px;*/
    height: 60px;
    padding: 0px;
    /*border-radius: 8px;*/
    /*background-image: linear-gradient(135deg, var(--brand-color), var(--brand-color-over));*/
}



.banner .logoBrand #logoDesign {
    width: 16px;
    height: 17px;
}

    .banner .logoBrand #logoDesign path {
        fill: var(--control-color-over);
    }

.user-panel img{
    max-height: 2.1rem;
}

.dark-mode a:not(.btn),
.dark-mode button.btn-link{
  color: var(--brand-color);
}

.dark-mode a:not(.btn):hover,
.dark-mode button.btn-link:hover{
  color: var(--brand-color-over);
}

.dark-mode .help-content .list-group-item a:not(.btn){
    color: white;
}
.dark-mode .help-content .list-group-item a:not(.btn):hover {
    color: var(--brand-color);
}

.dark-mode a.dropdown-item{
    color: #fff !important;
}

.dark-mode .modal .form-control[readonly] {
    background-color: rgba(255,255,255, 0.4);
}

.dark-mode .btn-dark {
    border: #292d32;
}

.alert a {
    color: black !important;
}

.main-header {
    height: 65px;
}

.main-header .file-name {
  display: flex;
}

.main-header .file-name .icon {
  font-size: 30pt;
  margin-left: 10px;
  margin-right: 10px;
}

.main-header .file-name .info{
    white-space: nowrap;
    font-size: 1.5rem;
}

.main-header .bars-link{
    width:50px;
}
.main-header .bars-link i,
.main-header #templateName{
    color:black;
}

.dark-mode .main-header .bars-link i,
.dark-mode .main-header #templateName{
    color: white;
}

.main-header.has-doc:hover #templateName {
    color: var(--brand-color-over);
}

.dark-mode .main-header.has-doc:hover #templateName {
    color: var(--brand-color);
}

.main-header .is-editing {
    display: none;
}

body.editing .main-header .is-editing{
    display:inline-block;
}

body.editing .main-header .not-editing{
    display: none;
}

body.editing .main-header .bars-link:hover .is-editing{
    display: none;
}

body.editing .main-header .bars-link:hover .not-editing {
    display: inline-block;
}

.main-header .not-editing {
    display: inline-block;
}

.main-header .bread-crumb {
    font-size: 70%;
    margin-top: 8px;
}

.main-header .bread-crumb .crumb-spacer{
    margin-inline: 10px;
}

.main-header .bread-crumb .crumb-link {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-top: 0px;
    vertical-align: bottom;
}

.main-header.has-doc .not-editing {
    display: none;
}

.main-header.has-doc:hover .bars-link .is-editing{
    display: none;
}

.main-header.has-doc:hover .bars-link .not-editing {
    display: inline-block;
}

.main-header.has-doc:hover .bars-link:hover .not-editing {
    color: var(--brand-color-over);
}

.dark-mode .main-header.has-doc:hover .bars-link:hover .not-editing {
    color: var(--brand-color);
}

.main-header .file-name .file-saving,
.main-header .file-name .file-saving-error{
    border-left: solid 1px #dee2e6;
    padding-left: 15px;
    margin-left: 15px;
    color: var(--brand-color);
    font-size: 1.2rem;
    vertical-align: middle;
    padding-top: 6px;
    font-weight: 100;
    display: none;
}

.main-header.has-doc .file-name .file-saving {
    display: block;
}

.main-header .file-name .file-edit-properties{
    padding-left: 10px;
    color: var(--brand-color);
    font-size: 1.2rem;
    vertical-align: middle;
    padding-top: 6px;
    font-weight: 100;
    visibility:hidden;
    cursor: pointer;
}

.main-header.has-doc:hover .file-name .file-edit-properties {
    visibility: hidden;
}


.main-header .nav-link {
    color: var(--dark-color);
}
.content-pane .nav-tabs .nav-link,
.main-footer .nav-tabs .nav-link{
    color: var(--brand-color);
}

.main-header .nav-link:hover,
.content-pane .nav-tabs .nav-link:hover{
    color: var(--brand-color-over);
}

.main-header .brand-link{
    display: none;
}

.sidebar-collapse .main-header .bars-link{
    display: none;
}


.sidebar-collapse .main-header .brand-link {
    /*margin-inline-start: 10px;*/
    margin-inline-end: 20px;
    /*margin-top: 8px;*/
    /*border: solid 1px var(--brand-color-over);*/
    width: 55px;
    height: 35px;
    padding: 0px 3px 3px 8px;
    /*border-radius: 8px;*/
    /*background-image: linear-gradient(135deg, var(--brand-color), var(--brand-color-over));*/
    /*color: #fafafa;*/
    /*font-size: 140%;*/
}


.sidebar-collapse .main-header .brand-link:hover{
    background-image: none;
    color: var(--brand-color);
    border: none;
}


.sidebar-collapse .main-header .brand-link{
    display: inline-block;
}
.sidebar-collapse .main-header .brand-link .brand-expand {
    display: none;
}

.sidebar-collapse .main-header .brand-link:hover .brand-expand {
    display: inline-block;
}

.sidebar-collapse .main-header .brand-link:hover .brand-logo {
    display: none;
}


.layout-footer-fixed .wrapper .control-sidebar{
    top: 65px;
    bottom: 57px;
}

.layout-footer-fixed.layout-tall-footer .wrapper .control-sidebar{
    bottom: 350px;
}

/* Footer and log*/
    .main-footer {
    height: 57px;
    background-color: #f4f6f9;
    overflow: hidden;
    padding: 0px;
    border-top: solid 1px #dee2e6 !important;
}

#app > .editor-cookies{
    display: none;
    position: absolute;
    bottom: 0px;
    width: auto;
    background: var(--secondary);
    color: white;
    margin-left: 250px;
    display: flex;
    padding: 10px 20px 10px 20px;
    z-index:1000;
}

#app > .editor-cookies a{
    font-weight: 700;
    text-decoration: underline;
    color: white;
}





.sidebar-collapse #app > .editor-cookies{
    margin-left: 0px;
}

#app > .editor-cookies .cookie-actions {
    flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 20px;
}

#app > .editor-cookies .cookie-actions .btn {
    width: 100%;
}

@media(min-width: 1200px) {

    #app > .editor-cookies .cookie-actions {
        flex-basis: 220px;
        flex-grow: 0;
        flex-shrink: 0;
        margin-left: 20px;
    }

    #app > .editor-cookies .cookie-actions .btn {
        width: 95px;
        margin-left:10px;
    }
    
}

#app > .editor-cookies .cookie-icon {
    flex-basis: 80px;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 40pt;
    margin-right: 20px;
}



.main-footer .exec-log{
    display:none;
}





.main-footer .exec-status{
    padding: 1rem;
    height: 57px;
    position: absolute;
    bottom: 0px;
    width: 100%;   
}

.main-footer .exec-action {
    position: absolute;
    right: 0px;
    top: 1px;
    width: 140px;
    padding: 10px;
    background-color: #f4f6f9;
}

.dark-mode .main-footer .exec-action {
    background-color: #343a40;
}


.main-footer .exec-status .exec-result{
    display:inline;
    cursor: pointer;
    white-space:nowrap;
}

.main-footer .exec-result .exec-show-log,
.main-footer .exec-result .exec-hide-log{
    display: none;
    padding-right:4px;
}

.main-footer .exec-result:hover .exec-show-log{
    display:inline-block;
}

.main-footer .exec-result:hover .exec-bug{
    display:none;
}

body.editing.layout-tall-footer .exec-result:hover .exec-show-log {
    display: none;
}

body.editing.layout-tall-footer .exec-result:hover .exec-hide-log {
    display: inline-block;
}


body.editing.layout-tall-footer .main-footer {
    height: 350px;
    transition: height ease-in-out 0.5s;
}

body.editing .main-footer > .resizer.horizontal{
    display: none;
}

body.editing.layout-tall-footer .main-footer > .resizer.horizontal {
    display: block;
}

body.editing.layout-tall-footer .content-wrapper .content-sizer {
    height: calc(100% - 358px);
    transition: height ease-in-out 0.5s;
}

body.editing.layout-tall-footer .main-footer .exec-log {
    display: block;
    height: 293px;
    position: relative;
    top:0px;
    overflow:hidden;
    border-bottom: solid 1px #dee2e6;
}

.exec-log .exec-log-error{
    color: red;
    white-space: pre;
}

.exec-log .exec-log-history{
    height: 100%;
    overflow-y: auto;
    background-color: white;
}

.exec-log .exec-log-history table.table{
    margin-bottom: 0px;
    background-color: #f4f6f9
}

.exec-log .exec-log-history table th {
    user-select:none;
}

.exec-log .exec-log-history table th .resize-table-cell-h {
    width:2px;
    height:30px;
    position:absolute;
    right:2px;top:0px;
    border-left:solid 1px #dee2e6;
    cursor:col-resize;
}

.dark-mode .exec-log .exec-log-history table th .resize-table-cell-h {
    border-left: solid 1px #6c757d;
}

.exec-log .exec-log-history table .expand-title-cell{
    min-width: 130px;
    max-width: 900px;
}

.exec-log .exec-log-history table.table-sm td {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

.exec-log .exec-log-history .exec-log-history-entries{
    height: 170px;
    overflow-y: auto;
}

.exec-log .exec-log-history .exec-log-history-entries table{
    background-color: white;
}

.dark-mode .exec-log .exec-log-history table.table {
    background-color: #343a40;
}

.dark-mode .exec-log .exec-log-history .exec-log-history-entries table,
.dark-mode .exec-log .exec-log-history {
    background-color: #454d55;
    color: white;
}

.main-footer .exec-log-options {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
    padding: 0.5rem 1rem;
}

.dark-mode .main-footer .exec-log-options select.disabled{
    color: #869099;
}

.main-footer .exec-log-options > * {
    margin-right: 1rem;
}

.main-footer .exec-log-options .form-check,
.main-footer .exec-log-options .form-group {
    margin-left: 20px;
}

.main-footer .exec-log-options select {
    font-size: 0.75rem;
    padding: 0.25rem 0.1rem;
    height: 1.5rem;
}

.nav-tabs .fa, .nav-tabs .fas,
.tree-view .fa, .tree-view .fas,
.file-list .fa, .file-list .fas,
.repository-file-info .fa, .repository-file-info .fas {
    margin-right: 10px;
}

.input-group .fa{
    margin-right: 0px;
}

.content-wrapper .editor-loading-failed{
    display: none;
}

.content-wrapper.failed .editor-loading-failed {
    display: block;
    position: relative;
    top:2rem;
    padding: 2vh 2vw;
}

.dark-mode .content-wrapper.failed .editor-loading-failed{
    color: orangered;
}

.content-wrapper .editor-loading{
    display:none;
    text-align: left;
    height: 60px;
    background-color: var(--brand-color);
    border-radius: 10px;
    padding: 15px;
    font-size: large;
    color: white;
    margin: 10px 20px;
}

.content-wrapper .editor-loading i.fa{
    font-size: x-large;
    margin-right:20px;
}


.content-wrapper.loading .editor-loading{
    display: block;
}

.content-wrapper.failed .content-sizer,
.content-wrapper.loading .content-sizer {
    display: none;

}


.content-wrapper .content-sizer{
  height: calc(100% - 65px);
  width: 100%;
}




.content-pane {
  min-width: 200px;
  height: 100%;
  vertical-align: top;
  position: relative;
  padding-left: var(--splitter-size);
}

.content-size-row .content-pane:first-child {
    padding-left: 0px;
}



.content-split{
  width: 100%;
  column-span: 3;
}


.resizer.vertical {
  left:0px;
  width: var(--splitter-size);
  height: 100%;
  border-left: #dee2e6 1px solid;
  border-right: #dee2e6 1px solid;
  border-collapse: collapse;
  position: absolute;
  background-color: #fff;
  cursor: ew-resize;
}

.dark-mode .resizer.vertical {
    background-color: #343a40;
    border-left-color: #56606a;
    border-right-color: #56606a;
}


.resizer.horizontal {
  left:0px;
  top: 0px;
  height: var(--splitter-size);
  width: 100%;
  border-top: #dee2e6 1px solid;
  z-index: 20;
  position: absolute;
  background-color: #fff;
  cursor: ns-resize;
}


.dark-mode .resizer.horizontal {
    background-color: transparent;
    border-left-color: #56606a;
    border-right-color: #56606a;
}

.dark-mode .resizer.horizontal {
    border-top-color: #56606a;
}


.content-pane .content-options,
.main-footer .exec-log-options{
    background-color: #f4f6f9;
    z-index: 11;
    height: var(--code-options-size);
    border-bottom: solid 1px #dee2e6;
    padding: 2px 5px;
}

.dark-mode .content-pane .content-options,
.dark-mode .main-footer .exec-log-options{
    background-color: #343a40;
    border-bottom: solid 1px #56606a;
}




aside.control-sidebar {
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22) !important;
    padding:0px;
}

.content-size-row.content-row-edit{
    display:flex;
}
.content-size-row .content-pane {
    min-height: 200px;
}

.command{
  cursor: pointer;
}

select.form-control,
select.form-select{
    -webkit-appearance: menulist;
}
/* Top nav-bar icons */

.main-header .navbar-nav.ml-auto {
    right: 5px;
    z-index: 9;
}


.main-header .user-actions .user-signed-in {
    display: none;
}

.main-header .user-actions .user-sign-in {
    display: inline-block;
    white-space: nowrap;
}

.main-header .user-actions.logged-in .user-signed-in {
    display: inline-block;
    color: var(--brand-color);
}

.main-header .user-actions.logged-in .user-sign-in {
    display: none;
}

.main-header li.dropdown.always-show .dropdown-menu{
    display: block !important;
}

.dropdown form.small .form-group label{
    margin-bottom: 0px;
}

.dark-mode .dropdown .form-control-plaintext{
    color: white;
}

.main-header li.dropdown.always-show.required a.nav-link {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-radius: 0.5em;
}


.main-header li.dropdown.always-show.required .dropdown-menu {
    border-color: #dc3545 !important;
}

.main-header li.dropdown.always-show.required .dropdown-header {
    background-color: #dc3545 !important;
    color: #fff;
}

.dark-mode .main-header li.dropdown.always-show.required .dropdown-menu {
    border-color: #dc3545 !important;
}

.dark-mode .main-header li.dropdown.always-show.required .dropdown-header {
    background-color: #e74c3c !important;
}

.dark-mode .main-header li.dropdown.always-show.required a.nav-link {
    background-color: #e74c3c !important;
}

form label > .required{
    color: var(--danger);
}

body .command-dark-mode {
  display: inline-block;
}

body .command-light-mode {
  display: none;
}

body.dark-mode .command-dark-mode {
  display: none;
}

body.dark-mode .command-light-mode {
  display: inline-block;
}


/* Help content */

.control-sidebar-slide-open .command-toggle-help{
    color: var(--brand-color) !important;
}

.command-toggle-help {
    color: white;
    display: block;
}

.has-doc .command-toggle-help{
    display: block;
}

.control-sidebar{
    display: block;
}

.control-sidebar .help-wrapper .card .card-header .fa{
    color: inherit;
}


.control-sidebar .help-wrapper {
    height: 100%;
    margin-left: 3px;
}

.control-sidebar .help-header {
    border-bottom: solid 1px #56606a;
    padding: 10px 10px 7px 10px;
    height: 48px;
    overflow: hidden;
}


.control-sidebar .help-header h4{
    padding: 5px;
    font-size:large;
    font-weight:normal;
}

.control-sidebar .help-header .help-nav{
    position:absolute;
    top:8px;
    right:5px;
    z-index: 1;
}

.control-sidebar .help-content{
    padding: 5px;
    margin-top: 3px;
    height: calc(100% - 48px);
    overflow: hidden;
    position: relative;
}

.control-sidebar .help-content .help-nav{
    position: absolute;
    top: 10%;
    left: -10px;
    font-size: xx-large;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.control-sidebar .help-content .help-nav-btns .dropdown-toggle{
    max-width: 50px;
}

.control-sidebar .help-content .help-nav.help-fore{
    left: auto;
    right:-10px;
}

.control-sidebar .help-content .help-nav:hover{
    opacity: 1.0;
    transition: opacity 0.2s;
}

.control-sidebar .help-content .help-nav a{
        color: gray !important;
}

.control-sidebar .help-content .help-content-group{
    overflow: auto;
    height: 100%;
    transition: width 0.5s;
}

.control-sidebar .help-content .help-content-title{
    margin: 10px 0px;
}

.control-sidebar .help-content .card{
    border-left: solid 1px rgba(0,0,0,.125);
    border-right: solid 1px rgba(0,0,0,.125);
}

.control-sidebar .help-content-scroll .card .card-header{
    padding-left: 0.25rem;
    padding-right: 0.1rem;
}
.control-sidebar .help-content .card .card-header .btn-link {
    color: #4b545c;
}
.control-sidebar .help-content .card .card-header .btn-link:hover {
    color: var(--brand-color);
}

.control-sidebar .help-content pre {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    color: #e83e8c;
    tab-size: 2rem;
}

.dark-mode .control-sidebar .help-content pre {
    border-color: #6c757d;
}

.dark-mode .control-sidebar .help-content .card .card-header .btn-link{
    color: white;
}
.dark-mode .control-sidebar .help-content .card .card-header .btn-link:hover{
    color: var(--brand-color);
}

.control-sidebar .help-content .list-group-item.small{

    font-size: 90%;
    padding: 0.5rem;
}

.control-sidebar .help-content-params .list-group-item:hover,
.control-sidebar .help-content-eg .list-group-item:hover,
.control-sidebar .help-content-returns .list-group-item:hover,
.control-sidebar .help-content-attrs .list-group-item:hover {
    background-color: inherit;
}


.control-sidebar .help-content .card s {
    text-decoration: none;
    color: darkred;
    font-style: italic;
    opacity: 0.7;
}

.dark-mode .control-sidebar .help-content .card s {
    color: coral;
    opacity: 0.5;
}

.control-sidebar .help-content details {
    margin-bottom: 0.5em;
    border-top: solid 1px;
}

.control-sidebar .help-content details > summary {
    font-weight: 600;
    padding-top: 0.5em;
}

.control-sidebar .help-content details[open] > summary {
    padding-bottom: 0.5em;
}


/* Close help sidebar */

.command.command-close{
  position: absolute;
  right: 0px;
  top: 0px;
}

.command.command-close:hover{
  color: black;
}

.dark-mode .command.command-close:hover{
  color: white;
}

.dark-mode .bg-danger{
   background-color: #e74c3c !important;
}

.form-label .req{
    color: red;
    padding-left: 5px;
}

/* Resizing the side bar */


.control-sidebar-slide-open.control-sidebar-push .content-wrapper,
.control-sidebar-slide-open.control-sidebar-push .main-footer,
.control-sidebar-slide-open.control-sidebar-push-slide .content-wrapper,
.control-sidebar-slide-open.control-sidebar-push-slide .main-footer{
    margin-right: var(--help-width);
}

.control-sidebar, .control-sidebar::before{
    width: var(--help-width);
    right: var(--help-offset);
}

.control-sidebar .resizer.vertical{
    z-index: 10;
    border: none;
}


/* Tagging Basic Style */
.info-tags .badge-pill {
    font-size: 1rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 400;
}

.info-tags .badge-pill::before{
    content: '#';
    background-color: var(--brand-color);
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    margin-left: -0.4rem;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
    margin-right: 0.2rem;
}


.tag-input.tagging {
    font-size: 1em;
    height: auto;
    border-radius: 0.25rem;
}

.dark-mode .tag-input.tagging {
    border-color: #6c757d;
}

.tag-input.tagging.editable {
    cursor: text;
}

.tag-input .tag {
    background: none repeat scroll 0 0 #6c757d;
    border-radius: 1rem;
    color: white;
    cursor: default;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 1px 25px 1px 0.2rem;
    margin: 5px 10px 0 0;
}

.dark-mode .tag-input .tag {
    background-color: #6c757d;
}

.tag-input .tag span {
    background: none repeat scroll 0 0 var(--brand-color);
    border-radius: 0.9rem 0 0 0.9rem;
    margin-left: 1px;
    padding: 1px 5px;
}

.tag-input .tag .tag-i {
    color: white;
    cursor: pointer;
    font-size: 1.3em;
    height: 0;
    line-height: 0.1em;
    position: absolute;
    right: 9px;
    top: 0.5em;
    text-align: center;
}

.tag-input .tag .tag-i:hover {
    color: black;
    text-decoration: underline;
}

.tag-input .type-zone {
    border: 0 none;
    height: auto;
    width: auto;
    min-width: 20px;
    display: inline-block;
    background-color: transparent;
}

.dark-mode .tag-input .type-zone{
    color: white;
}

.tag-input .type-zone:focus {
    outline: none;
}


/* content pane and tabs */

.content-pane ul.nav-tabs {
/*    position: absolute;*/
    z-index: 10;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-left: 0px;
    padding-top: 2px;
}

.content-pane ul.nav-tabs,
.main-footer ul.nav-tabs {
    background-color: #fff;
    padding-top: 3px;
}

.content-pane{
    background-color: white;
}
.content-pane td {
    min-width: 200px;
}



/* content pane and tabs - dark mode */

.dark-mode .content-pane{
  background-color: #343a40;
/*  margin: 2px;*/
}

.dark-mode .content-pane.content-pages{
  background-color: transparent;

}

.dark-mode .content-pane .nav-tabs,
.dark-mode .main-footer .nav-tabs{
    background-color: #454d55 !important;
}

/* content row sizing */

.content-sizer:not(.dragging-inside) .content-size-row {
    transition: height 0.5s;
}

.content-sizer:not(.dragging-inside) .content-size-row .content-pane{
    transition: width 0.5s;
}

/* Help content */

#help-content {
  padding: 0.5rem;
  overflow-y: auto;
}

#help-content .help-header {
  margin-bottom: 0.5rem;
  position: relative;
}

/* preloading */

.preloader .loading-panel{
  margin: auto auto;
}



/* Code editor */

.CodeMirror{
  height: 100%;
  
}

.CodeMirror.cm-s-blackboard{
  background-color: #343a40;
}

.CodeMirror.cm-s-disabled-light {
    background-color: #f4f6f9;
}

.cm-s-blackboard .CodeMirror-gutters {
  background: #343a40;
  border-right: solid 1px #454d55;
  border-bottom: solid 1px #454d55;
}

.cm-s-eclipse .CodeMirror-gutters{
    background-color: #f4f6f9;
}

.content-switcher{
  overflow-y: scroll;
/*  padding-top: calc(var(--code-tabs-size) + var(--code-options-size) + 1px);*/
}

.content-switcher {
    height: calc(100% - 88px);
}
.content-switch{
  height: 100%;
}

.content-code-editor {
    /*  overflow-y: scroll;*/
    height: 100%;
}

.CodeMirror .CodeMirror-foldmarker {
    color: #333;
    border: solid 1px #333;
    padding: 0px 8px 2px 8px;
    text-shadow: none;
}

.CodeMirror .CodeMirror-foldmarker:hover {
    background-color: #555;
    color: #fff;
    transition: background-color 0.5s ease;
}

.CodeMirror .CodeMirror-gutter-elt .CodeMirror-foldgutter-open:hover,
.CodeMirror .CodeMirror-gutter-elt .CodeMirror-foldgutter-folded {
    color: black !important;
    transition: color 0.5s ease;
}

.dark-mode .CodeMirror .CodeMirror-foldmarker{
    color: white;
    border: solid 1px white;
}

.dark-mode .CodeMirror .CodeMirror-foldmarker:hover {
    background-color: #aaa;
    transition: background-color 0.2s ease;
}

.dark-mode .CodeMirror .CodeMirror-gutter-elt .CodeMirror-foldgutter-open:hover,
.dark-mode .CodeMirror .CodeMirror-gutter-elt .CodeMirror-foldgutter-folded {
    color: white !important;
    transition: color 0.2s ease;
}

/* code editor table content */
.content-wrapper > table.content-sizer {
    display: flex;
    flex-flow: column;
}

.content-wrapper > table.content-sizer > tbody {
    flex: 1 1 auto;
    display: block;
    width: 100%;
}

.content-wrapper > table.content-sizer tr.content-size-row {
    display: table;
    table-layout: fixed;
    width: calc(100% + 6px);
    margin-left: -6px; /* hides the padding from the tabs */
}

/* stop interaction when dragging a slider */
.content-wrapper.dragging-inside,
.content-wrapper > .content-sizer.dragging-inside {
    user-select: none;
    -webkit-user-select: none;
}

/* Code Editor controls */

/* editor content pane toolbar */

.content-options .input-group{
    flex-wrap: nowrap;
    white-space: nowrap;
}

.content-options .input-group input.form-control {
    border-color: #6c757d;
}

.dark-mode .content-control .btn-outline-secondary,
.dark-mode .content-control .dropdown-item
{
    color: #c2d5e5;
}

/* src-linked is readonly with an unlock action and a refresh action */
.content-options .content-control-source .code-refresh-action {
    display: none;
}

.content-options .content-control-source.src-locked .code-refresh-action {
    display: inline-block;
}

.content-options .content-control-source.src-locked .code-refresh-action .refresh {
    display: none;
}

.content-options .content-control-source.src-locked .code-refresh-action .type {
    display: inline-block;
}

.content-options .content-control-source.src-locked:hover .code-refresh-action .refresh {
    display: inline-block;
}

.content-options .content-control-source.src-locked:hover .code-refresh-action .type {
    display: none;
}

.content-options .content-control-source .code-unlock-action {
    display: inline-block;
}

.content-options .content-control-source .code-unlock-action button,
.content-options .content-control-source.src-locked .code-refresh-action button {
    width: 40px;
}


.content-options .content-control-source.src-locked .code-unlock-action .locked {
    display: inline-block;
}

.content-options .content-control-source.src-locked .code-unlock-action .unlocked{
    display: none;
}

.content-options .content-control-source.src-locked:hover .code-unlock-action .locked,
.content-options .content-control-source .code-unlock-action .locked {
    display: none;
}

.content-options .content-control-source.src-locked:hover .code-unlock-action .unlocked,
.content-options .content-control-source .code-unlock-action .unlocked {
    display: inline-block;
}

.content-options .content-control-source .multiple {
    display: none;
}

.content-options .content-control-source.src-multiple .multiple {
    display: flex;
}



/* Footer Fix for help side-bar */
.control-sidebar-slide-open.control-sidebar-push .main-footer {
    margin-right: 0px;
}


/* lhs menu items */

.sidebar-collapse .main-sidebar .hide-on-collapsed{
  display: none;
}
.user-panel .user-unknown i{
  font-size: 200%;
  margin-bottom: 1rem;
}

.user-panel .user-known p{
    color: white;
}


.nav-tabs .nav-link.active {
    background-color: #f4f6f9;
    border-color:  #dee2e6 #dee2e6 #f4f6f9;
}


.nav-item .nav-link .login-reason {
    display: none;
}

.nav-sidebar .nav-item > .nav-link, .nav-sidebar .nav-item > .nav-link p{
    white-space: nowrap;
    overflow: hidden;
}

.nav-item.disabled .nav-link .login-reason {
    display: inline;
}
.nav-item.disabled .nav-link {
    color: #666;
    cursor: default !important;
}

 .nav-item.disabled .nav-link:hover, 
 .nav-item.disabled .nav-link:active, 
 .nav-item.disabled .nav-link:focus {
  color: #666 !important;
}

body.logged-in .login-only{

}

.sidebar .nav-group{
  border-bottom: 1px solid #4f5962;
  margin-bottom: 0.1rem;
}

.nav-sidebar .nav-link > p > .right:nth-child(2){
    right: 1rem;
}

/* full page views */

.card .card-header,
.card .card-header h4{
    font-weight: 100;
}


.dark-mode .custom-file-input:disabled ~ .custom-file-label,
.dark-mode .custom-file-input[disabled] ~ .custom-file-label,
.dark-mode .custom-file-input[disabled] ~ .custom-file-label::after,
.dark-mode .card input:disabled
.dark-mode .card input:disabled::after {
    background-color: #6c757d;
}

.card .card-header .fa,
.card .card-header .fas,
.card .card-header .fa-brands {
    margin-right: 10px;
}

.card.card-warning .card-header .fa,
.card.card-warning .card-header .fas,
.card.card-warning .card-header .fa-brands,
.card .card-header.bg-warning .fa,
.card .card-header.bg-warning .fas,
.card .card-header.bg-warning .fa-brands {
    color: black;
}

.content-views {
    padding-top: 30px;
    height: calc(100% - 65px);
    overflow: auto;
    position: relative;
}
.content-views .view-close {
    position: fixed;
    right: 10px;
    top: 67px;
    font-size: 130%;
    color: #333;
    cursor: pointer;
}

.dark-mode .content-views .view-close {
    color: #DDD;
}

.content-views .view-close:hover{
    color: #000;
}

.dark-mode .content-pane .view-close:hover {
    color: #FFF;
}

.content-views .pages-view{
  display: none;
}

.content-views .pages-view.active{
  display: block;
}

.content-pane.readonly .content-switcher {
    background-color: #f4f6f9;
}

.dark-mode .content-pane.readonly .content-switcher {
    background-color: #343a40;
}



/* Open from provider */

.repository-selected .card .card-body,
.repository-file-view{
    max-height: 600px;
    overflow: scroll;
}

/* Simple Folder treeview */

.tree-view ul {
    list-style-type: none;
    margin: 0 20px 0 0;
    padding: 0;
}

.tree-view ul.tree-root{
    padding-bottom: 20px;
}

.tree-view ul li a {
    color: #212529;
    display:block;
    padding-left: 4px;
    white-space:nowrap;
}

.tree-view ul li a:hover{
    background-color: #eee;
    color: black;
    border-radius: 4px;
}

.dark-mode .tree-view ul li > a:hover {
    background-color: #454d55;
    color: white;
    border-radius: 4px;
}

.tree-view ul li.active > a,
.dark-mode .tree-view ul li.active > a:hover {
    background-color: #3f679199;
    border-radius: 4px;
}



.tree-view li > a {
    width: 100%;
}

.dark-mode .tree-view ul li a{
    color: #ddd;
}



.tree-view ul .tree-branch > a > .expand {
    visibility: hidden;
    width: 20px;
    height: 20px;
}

.tree-view ul .tree-branch.branch-container > a > .expand {
    visibility: visible
}

/*
.tree-view ul .tree-branch {
    padding-left: 30px;
}

.tree-view ul .tree-branch.branch-container{
    padding-left: 0px
}*/

.tree-view ul .branch-container > ul.tree-nested {
    display: none;
}

.tree-view ul .branch-container.open > ul.tree-nested {
    display: block;
    padding-left: 30px;
    margin-right: 0px;
}

/* file list view */

.repository-file-view{
    overflow: scroll;
    height: 100%;
}
.repository-file-view tr:hover {
    background-color: #eee;
}

.dark-mode .repository-file-view tr:hover{
    background-color: #454d55;
}

.repository-file-view .file-item{
    white-space: nowrap;
}
.repository-file-view .file-item a {
    color: #212529;
}
.dark-mode .repository-file-view .file-item a {
    color: #ddd;
}

.dark-mode .repository-file-view .file-item a {
    color: #ddd;
}

.repository-file-view .file-item.unsupported a{
    color: #888;
}
.repository-file-view tr.active,
.repository-file-view tr.active:hover {
    background-color: #3f679199;
}

/* file info */
.repository-file-info .card-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 58px;
}

.repository-file-info .list-group-flush{
    padding-bottom: 58px;
}

.repository-file-info .file-info-layout-label,
.repository-file-info .file-info-data-label,
.repository-file-info .file-info-style-label{
    float: left;
    padding-right: 0.4em;
}

.repository-file-info .file-info-layout,
.repository-file-info .file-info-data,
.repository-file-info .file-info-style {
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
    text-overflow: ellipsis;
}


/* Welcome screen */

.welcome-view .logo-dark{
    display: none;
}

body.dark-mode .welcome-view .logo-dark{
    display: inline-block;
}

.welcome-view .logo-light{
    display: inline-block;
}

body.dark-mode .welcome-view .logo-light{
    display: none;
}

.welcome-view .welcome-title h1.display-3 {
    font-size: 4vw;
    /*border-bottom: 2px solid #6c757d;*/
    padding-bottom: 1vw;
}

.welcome-view .row-title{
    margin-top: 1.5rem;
}

.welcome-view .welcome-features,
.welcome-view .welcome-title{
    font-family: "Nunito", sans-serif;
}

.welcome-view .welcome-title{
    font-family: "Nunito", sans-serif;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.welcome-view .welcome-title .logged-in h1.display-3 {
    font-size: 2.5vw;
}

.welcome-view .welcome-title .logged-in .logged-in-name {
    white-space: nowrap;
}

.welcome-view .welcome-desc{
    background-color: var(--brand-color);
    font-family: "Nunito", sans-serif;
    font-size: 140%;
}

@media (max-width: 3000px) {

    .welcome-view .welcome-desc {
        margin: 2vw calc(-5vw - 10px);
    }
}

@media (min-width: 1310px) {
    .welcome-view .welcome-desc {
        padding-right: calc(5vw + 10px);
    }
}

.welcome-view .welcome-desc .welcome-dec-text{
    padding: 1.5rem;
}

.welcome-view .welcome-desc .h4{
    font-size: 200%;
}

.welcome-view .welcome-features .h4{
    font-size: 140%;
}

.welcome-view .welcome-work-text{

    padding-top: 1rem;   
}

.welcome-view .container-fluid hr.brand{
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: solid 4px var(--brand-color);
}


.welcome-view .welcome-work-text li{
    margin-bottom: 1rem;
}

.welcome-view .welcome-desc a.sign-in{
    display: block;
    background-color: #343a40;
    margin: 2rem auto;
    width: 250px;
    text-align: center;
    padding: 1rem;
    color: white;
    border-radius: 5pt;
    text-decoration: none;
}

.welcome-view .welcome-whys .welcome-talk
{
    text-align: center;
}

.welcome-view .welcome-whys .welcome-talk .btn{
    background-color: var(--brand-color);
    width: 80%;
    color: white;
    border-radius: 5px;
    padding: 10px;
}
/* visible on the right side */
.welcome-view .welcome-whys .welcome-talk .btn.d-none{
    width: 100%;
    border-radius: 10px;
    padding: 30px;
}

.welcome-view .welcome-whys .welcome-talk .btn:hover{
    background-color: var(--brand-color-over);
}

.welcome-view .welcome-whys .welcome-talk i.connect-icon{
    font-size: 1.5rem;
    vertical-align: text-bottom;
    margin-inline-end: 3px;
}

.welcome-view .welcome-whys .welcome-talk i.connect-icon.xl{
    display: block;
    font-size: 6rem;
    padding: 2rem;
    
}

.welcome-view .welcome-whys .welcome-talk i.connect-icon.lg{
    display: block;
    font-size: 3rem;
    padding-bottom: 1rem;

}

.welcome-view .welcome-desc a.strong{
    color: white;
    text-decoration: underline;
}

.welcome-view .welcome-why-list li{
    margin-bottom: 2rem;
}

.welcome-view .welcome-features button.nav-link{
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    color: var(--brand-color);
    font-size: 120%;
    border-bottom: solid 1px var(--brand-color);
    width: 90%;
    margin: 0 5%;
}

.welcome-view .welcome-features button.nav-link:hover{
    color: var(--brand-color-over);
}

.welcome-view .welcome-features button.nav-link.active{
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    color: white;
    background-color: var(--brand-color);
    font-size: 120%;
    border-bottom: solid 1px var(--brand-color);
    width: 90%;
    margin: 0 5%;
}

.welcome-view .scroll-row-wrapper{
    margin-left: 30px;
    margin-right: 30px;
    position: relative;
}

.welcome-view .scroll-row-wrapper .row-wrapper-scroll,
.welcome-view .scroll-row-wrapper .row-wrapper-scroll{
    display: none;
}

.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll {
    display: flex;
    position: absolute;
    height: 100%;
    color: rgba(125,125,125,0.1);
    z-index: 3;
    width: 30px;
    text-align: center;
    font-size: 1.8rem;
    padding-left:0px;
    align-items: center;
    top:0px;
    border: solid 0px transparent;
    border-radius: 5px;
}

.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.active {
    color: gray;
    cursor: pointer;
}

.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.active:hover {
    border-color: gray;
    background-color: rgba(125,125,125,0.25);
    color:white;
}

.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.scroll-left{
    left: -35px;
    padding-left: 5px;
}
.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.scroll-right{
    padding-left: 5px;
    right: -35px;
}

.welcome-view .scroll-row-wrapper.is-scollable .row-wrapper-left-scroll i{
    vertical-align:middle;
}


.welcome-view .template-set.card-deck {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.welcome-view .welcome-why-list{
    font-size: 1.5rem;
}

@media only screen and (max-width: 900px) {
    
    .welcome-view .welcome-title h1.display-3 {
        font-size: calc(12pt + 2.5vw);
    }

    .welcome-view .welcome-title .logged-in h1.display-3 {
        font-size: calc(12pt + 1.5vw);
    }
}

.welcome-view .welcome-title-group{
    border-bottom: solid 1px silver;
    margin-bottom: 0.75rem;
}

.welcome-view .welcome-title-group .welcome-title-link.btn {
    position: absolute;
    right: 0;
    bottom: 8px;
}

/* Welcome view */


.welcome-view .thin{
    font-weight: 200;
}

.welcome-view .strong {
    font-weight: 700;
}

.welcome-view a,
.dark-mode .welcome-view a {
    color: var(--brand-color);
}


.welcome-view .code-edit.btn {
    vertical-align: top;
    position: absolute;
    display: block;
    top: 5px;
    right: 5px;
}

.welcome-view a.code-edit,
.welcome-view a.code-edit:hover {
    color: inherit;
}

.card-header-bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.welcome-view .new-simple-box,
.welcome-view .new-upload-box,
.welcome-view .new-from-sample-box{
    cursor: pointer;
}

.welcome-view .new-box-content {
    display: block;
    margin: auto auto;
    width: 50px;
    font-size: 4rem;
    line-height: 100px;
}

.welcome-view .welcome-desc .welcome-desc-img{
    background-image: url("/images/paperwork-ipad.jpg");
    background-size: cover;
    background-clip: border-box;
    background-position: center;
    min-height: 500px;
}


/* New Blank */
    .create-view .creating-template {
    display: inline-block;
}

.color-picker .accent-block{
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* upload view */
.upload-view .import-type{
    display: flex;
}


.upload-view .import-type button{
    width: 40%;
    margin: 20px auto;
    padding: 20pt 10pt;
    border: solid 1px transparent;
}

.upload-view .import-type button.btn-dark{
    border-color: var(--brand-color);
}

.upload-view .import-type button i.far{
    font-size: 40pt;
    color: var(--brand-color);
    display: block;
    margin-bottom: 25pt;
}

.upload-view .row-paste .custom-editor-background{
    overflow: auto;
    max-height: 600px;
    min-height: 300px;
    background-color: white;
    color: black;
}

    

/* Loading progress */
.loading-progress {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    margin: 200px auto auto auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand-color);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    display: block;
    width: 100%;
    top: 285px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
   
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Content Preview */

.content-preview{
    overflow: hidden;
    position: relative;
}
.content-preview .none-wrapper,
.content-preview .loading-wrapper,
.content-preview .error-wrapper{
    margin: 0 25%;
    padding: 25px 0;
    width: 50%;
    text-align: center;
    color: #666;
    opacity: 0.5;
    font-size: 150%
}

.dark-mode .content-preview .none-wrapper,
.dark-mode .content-preview .loading-wrapper
{
    color: var(--brand-color);
}

.content-preview .error-wrapper {
    color: red;
}

.content-preview .none-wrapper .none-icon,
.content-preview .error-wrapper .error-icon,
.content-preview .loading-wrapper .loading-icon{
    font-size: 200%;
}

/*.content-preview .none-wrapper .none-msg{
    font-size: 200%;
}*/

.content-preview .content-preview-doc,
.content-preview .content-preview-loading,
.content-preview .content-preview-error{
    display: none;
}

.content-preview.running .content-preview-none,
.content-preview.failed .content-preview-none,
.content-preview.loaded .content-preview-none {
    display: none;
}

.content-preview.running .content-preview-loading{
    display: block;
}

.content-preview.failed .content-preview-error {
    display: block;
}

.content-preview.loaded .content-preview-doc {
    display: block;
    height: 100%;
    overflow: auto;
    background-color: #f4f6f9;
    padding: 30px;
}

.dark-mode .content-preview.loaded .content-preview-doc {
    background-color: #343a40;
}

.content-preview-doc .preview-wrapper {
    background-color: #f4f6f9;
    overflow: auto;
    height: 100%;
}

.dark-mode .content-preview-doc .preview-wrapper {
    background-color: #343a40;
    border: solid 1px #999;
    overflow: hidden;
}

.content-preview.loaded .preview-wrapper {
    margin: 0px auto;
    position: relative;
    filter: drop-shadow(7px 10px 10px #0008)
}

.content-preview.loaded .preview-pdf {
    padding: 0;
    margin:0;
    display: block;
}

/* preview annotations */



.preview-wrapper .preview-pdf-annotations {
    top: 0px;
    left:0px;
}

.preview-wrapper .preview-pdf-annotations section.linkAnnotation {
    position: absolute;
    cursor: pointer;
}

.preview-wrapper .preview-pdf-annotations section.linkAnnotation:hover {
    background-color: #00aaaa55;
}

.preview-wrapper .preview-pdf-annotations section.linkAnnotation a{
    display:block;
    width:100%;
    height: 100%;
}

/* preview progress circle */

.content-preview .progress {
    display: none !important;
}
.content-preview .loading-percent {
    display: grid;
    height: 250px;
    place-items: center;
    background-color: transparent;
    color: white;
    Font-family: sans-serif;
}

.content-preview svg {
    width: 114px;
    height: 114px;
    margin: 1em;
}

.content-preview svg circle.loading-percent-bg {
    fill: none;
    stroke-width: 10px;
    stroke: #454d55;
}
.content-preview svg circle.loading-percent-meter {
    fill: none;
    stroke-width: 10px;
    stroke-linecap: round;
    /*transform: rotate(-90deg);*/
    /*transform-origin: center center;*/
    stroke-dasharray: 360;
    stroke-dashoffset: 359;
    stroke: #00b6b6;
    transition: stroke-dashoffset 0.3s;
}

.content-preview.running svg circle.loading-percent-meter{
    stroke-dashoffset: 359;
}

.pages-view {
    padding: 10px;
}

/* template cards */

.ribbon-wrapper{
    pointer-events: none;
}

.collection-set .card:hover,
.template-set .card:hover {
    margin-left: 5px;
    margin-right: 10px;
    filter: drop-shadow(7px 10px 10px #0008);
}

.collection-set .card-footer,
.template-set .card-footer {
    padding: 0.75rem 0.5rem;
}

.dark-mode .collection-set a:not(.btn),
.dark-mode .template-set a:not(.btn) {
    color: var(--brand-color);
}

.collection-set .info-box,
.template-set .info-box {
    margin: 5px 0px 16px 0px;
}

.collection-set .info-box .info-box-content,
.template-set .info-box .info-box-content {
    justify-content: space-between;
}

.collection-set .info-box .info-box-bottom,
.template-set .info-box .info-box-bottom{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.collection-set .info-box:hover,
.template-set .info-box:hover {
    margin: 2px 0px 19px 0px;
    filter: drop-shadow(7px 10px 10px #0008);
}

.template-set .info-box .info-box-icon,
.template-set .info-box .info-box-icon img {
    min-width: 70px;
    width: 5vw;
}

.template-set .info-box .info-box-icon img {

    border: solid 1px var(--brand-color);
}

.collection-set .info-box hr,
.template-set .info-box hr{
    border-top: solid 1px var(--brand-color);
    margin: 0.25rem;
}

.collection-set .info-box .btn-grouping,
.template-set .info-box .btn-grouping{
    float: right;
    white-space: nowrap;
}

.collection-set .card .btn-grouping,
.template-set .card .btn-grouping {
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

.collection-set .card .card-footer .btn,
.template-set .card .card-footer .btn {
    flex: 1;
    margin-left: 5px;
    margin-right: 5px;
}

.collection-set .card .card-footer .btn,
.template-set .card .card-footer .btn {
    color: #21252A;
}

.dark-mode .collection-set .info-box .info-box-bottom .btn,
.collection-set .card:hover .card-footer .btn:hover,
.dark-mode .collection-set .card .card-footer .btn,
.dark-mode .template-set .info-box .info-box-bottom .btn,
.template-set .card:hover .card-footer .btn:hover,
.dark-mode .template-set .card .card-footer .btn {
    color: white;
}

.template-set .info-box.pam-checked-outline,
.template-set .card-container.pam-checked-outline > .card{
    border-top: 3px solid #dc3545;
}

.template-set .info-box.pam-checked-outline.to-me,
.template-set .card-container.pam-checked-outline.to-me > .card{
    border-top: 3px solid #ffc107;
}

.dark-mode .template-set .info-box.pam-checked-outline,
.dark-mode .template-set .card-container.pam-checked-outline.to-me > .card {
    border-top: 3px solid #e74c3c;
}
.dark-mode .template-set .info-box.pam-checked-outline.to-me,
.dark-mode .template-set .card-container.pam-checked-outline.to-me > .card {
    border-top: 3px solid #f39c12;
}


.template-set .pam-checked-outline .ribbon-wrapper {
    top: -3px;
}

.pam-item.info-box .ribbon-wrapper .ribbon{
    font-size: 0.65rem;
}

.collection-set .col-item .card-text,
.template-set .pam-item .card-text {
    max-height: 50px;
    overflow-y: hidden;
}

.mine-view .h4, .mine-view h5, .mine-view h6, .template-set .card-img-top,
.references-view .h4, .references-view h4, .published-view .h4, .collection-view .h4, .template-set .card-img-top, .collection-set .card-img-top {
    border-bottom: solid 1px rgba(0,0,0,0.125);
}

.pam-filters-side{
    max-width: 220px;
}

.pam-filters.pam-filters-sample .pam-filters-status,
.pam-filters.pam-filters-sample .pam-action-status {
    display: none;
}
.pam-filters-side .btn-group{
    display: flex;
}

.pam-filters-side .pam-filter-group{
    padding-top: 10px;
}

.pam-filters-tags .list-group-item{
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.dark-mode .pam-filters-tags .list-group-item{
    color: white;
}

.pam-filters-tags .list-group-item:hover{
    background-color: #aaa;
}

.dark-mode .pam-filters-tags .list-group-item:hover {
    background-color: #3f6791;
}

.pam-filters-tags .list-group-item .badge-pill {
    margin-right: 0.5rem;
}

.pam-filters-status .btn{
    width: 100%;
}

.pam-filters-status .form-check .form-check-label {
    font-weight: 400;
}

.pam-filters-sort .toggle[data-list-sort-order='desc'] .asc {
    display: none;
}


.pam-filters-sort .toggle[data-list-sort-order='asc'] .desc {
    display: none;
}

.pam-filters-sort .toggle[data-list-sort-order='asc'] .asc {
    display: inline-block;
}

.pam-filters-sort .toggle[data-list-sort-order='desc'] .desc {
    display: inline-block;
}


.pam-item .info-box-icon{
    position: relative;
}

.pam-item{
    opacity: 100;
}

.pam-item.deleted{
    opacity: 0;
    transition: opacity 0.5s
}

.pam-item.info-box .pam-checkedout {
    float: left;
    display: block;
    color: #e74c3c;
    padding-top: 8px;
    font-size: 1.2rem;
    padding-right: 10px;
}

.pam-item .card .pam-checkedout {
    float: right;
    display: block;
    position: absolute;
    right: 10px;
    top: 12px;
    color: #e74c3c;
}

/* check in/out, publish dialog */
.template-view .thumb-wrapper,
.reference-view .thumb-wrapper,
#checkoutTemplate .thumb-wrapper,
#checkinChanges .thumb-wrapper {
    float: left;
    min-height: 200px;
    min-width: 200px;
    position: relative;
    margin-bottom: 20pt;
}

.checkin-options-wrapper form label{
    display: block;
}

/* collection view */
.collection-view .owner-only,
.collection-view .edit-info,
.collection-view .editor-only {
    display: none !important;
}

.collection-view.is-owner .owner-only{
    display: block !important;
}

.collection-view.is-owner .owner-only.flex {
    display: flex !important;
}

.pages-view.collection-view.is-owner .row-top-info:hover .edit-info {
    display: inline-block !important;
}

.collection-view.is-owner .not-owner {
    display: none;
}

.collection-view.is-editor .editor-only {
    display: block !important;
}

.collection-view.is-editor .editor-only.flex {
    display: flex !important;
}

.collection-view.is-editor .not-editor {
    display: none;
}

.collection-view .row-top-info .info-icon {
    border-radius: .25rem;
    border-width: 2px;
    border-style: solid;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.875rem;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    min-width: 70px;
    min-height: 70px;
}

.collection-view .row-top-info .info-accent-action {
    border-radius: .25rem;
    border-width: 1px;
    border-style: solid;
    -ms-flex-align: center;
    align-items: center;
    display: none;
    font-size: 1.275rem;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-width: 70px;
    min-height: 70px;
    padding: 0.8rem;
}

    .collection-view .row-top-info .info-accent-action.bg-none {
        border-color: #ced4da;
        color: #495057;
        background-color: #fff;
    }

.dark-mode .collection-view .row-top-info .info-accent-action.bg-none {
    border-color: #6c757d;
    color: #fff;
    background-color: #343a40;
}

.collection-view .row-top-info.editing .info-icon{
    display: none;
}

.collection-view .row-top-info.editing .info-accent-action {
    display: -ms-flexbox;
    display: flex;
}

.collection-view .row-permissions .updating-action{
}

.collection-view .row-permissions .card-tools .btn-tool{
    color: inherit;
}

.collection-view .user-list .user-details {
    padding-left: 50px;
}

.collection-view .user-list .user-initials {
    display: inline-block;
    margin-right: 10px;
    font-size: 80%;
    background-color: var(--brand-color);
    padding: 0.25rem;
    border-radius: 1rem;
    position: absolute;
    left: 10px;
    width: 27px;
    top: 20px;
}

.collection-view .user-list .user-add-action {
    display: inline-block;
    margin-right: 10px;
    padding: 0.25rem;
    position: absolute;
    left: 10px;
    width: 27px;
    top: 15px;
}

.collection-view .user-list .list-group-item {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.collection-view .user-list .list-group-item.user-not-found{
    padding-top: 5px;
    padding-bottom: 5px;
}

.collection-view .col-permission-errors{
    display: none;
}

.collection-view.permission-errors .nav-item{
    position: relative;
}

.collection-view.permission-errors .nav-item .col-permission-errors {
    display: block;
    position: absolute;
    right: 0px;
    top: -4px;
    height: 10px;
    width: 10px;
    background-color: var(--danger);
    border-radius: 5px;
    border: solid;
    z-index: 10;
}

.collection-view .user-list .list-group-item.user-not-found .user-add-action {
    top: 0px;
}

.collection-view .user-list .user-edit-role,
.collection-view .user-list .user-remove-role,
.collection-view .user-list .user-add-role,
.license-assign-view .user-list .user-remove-license,
.license-assign-view .user-list .user-retract-license {
    position: absolute;
    right: 10px;
    top: 20px;
    visibility: hidden;
}


.collection-view .user-list .user-add-role i.fa {
    margin-right: 0px;
}

.collection-view .user-list .list-group-item:hover .user-edit-role,
.collection-view .user-list .list-group-item:hover .user-remove-role,
.collection-view .user-list .card:hover .user-add-role,
.license-assign-view .user-list .list-group-item:hover .user-remove-license,
.license-assign-view .user-list .list-group-item:hover .user-retract-license {
    visibility: visible;
}


.license-assign-view .row-permissions .card-tools .user-email-copy,
.collection-view .row-permissions .card-tools .user-email-copy {
    width: 32px;
    transition: width 0.2s;
    white-space: nowrap;
    overflow-x: hidden;
}

.license-assign-view .row-permissions .card-tools .user-email-copy.copied,
.collection-view .row-permissions .card-tools .user-email-copy.copied {
    width: 92px;
    transition: width 0.2s;
}

.license-assign-view .row-permissions .card-tools .user-email-copy .success,
.collection-view .row-permissions .card-tools .user-email-copy .success {
    display: none;
}

.license-assign-view .row-permissions .card-tools .user-email-copy.copied .success,
.collection-view .row-permissions .card-tools .user-email-copy.copied .success {
    display: inline;
}


.collection-view .row-permissions .card-tools .fa {
   margin-right: 0px;
}

.collection-view .row-permissions .card .user-roles-hider .show {
    display: none;
}

.collection-view .row-permissions.collapsed .card .user-roles-hider .show {
    display: inline-block;
}

.collection-view .row-permissions.collapsed .card .user-roles-hider .hide {
    display: none;
}

.collection-view .row-permissions .card .card-body {
    max-height: 600px;
    padding: 1.25rem;
    transition: max-height ease-in-out 0.2s;
    transition: padding ease-in-out 0.2s;
}


.collection-view .row-permissions.collapsed .card .card-body {
    max-height: 0px;
    padding:0px;
    overflow: hidden;
    transition: max-height ease-in-out 0.2s;
    transition: padding ease-in-out 0.2s;
}

/* assign view */

.license-assign-view .row-permissions .card-tools .btn-tool {
    color: inherit;
}

.license-assign-view .row-permissions .card-tools .fa {
    margin-right: 0px;
}

.license-assign-view .row-permissions .card .user-roles-hider .show {
    display: none;
}

.license-assign-view .row-permissions.collapsed .card .user-roles-hider .show {
    display: inline-block;
}

.license-assign-view .row-permissions.collapsed .card .user-roles-hider .hide {
    display: none;
}

.license-assign-view .row-permissions.collapsed .card .user-assigned .user-remove-license {
    display: none;
}

.license-assign-view .row-permissions.collapsed .card .user-assigned:hover .user-remove-license {
    display: inline-block;
}

.license-assign-view .row-permissions .card .card-body {
    max-height: 600px;
    padding: 1.25rem;
    transition: max-height ease-in-out 0.2s;
    transition: padding ease-in-out 0.2s;
}


.license-assign-view .row-permissions.collapsed .card .card-body {
    max-height: 0px;
    padding: 0px;
    overflow: hidden;
    transition: max-height ease-in-out 0.2s;
    transition: padding ease-in-out 0.2s;
}

/* accept view */

.license-accept-view .list-group .list-group-item.is-inactive{
    background-color: transparent;
}

/* roles view */

.license-roles-view .nav-tabs .nav-link.active{
    background-color: white;
}

.dark-mode .license-roles-view .nav-tabs .nav-link {
    color: #FFF;
}

.dark-mode .license-roles-view .nav-tabs .nav-link.active {
    background-color: #343a40;
}

/* multiple modals */
.modal:nth-of-type(even) {
    z-index: 1042 !important;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1041 !important;
}

.modal-dialog .modal-footer{
    justify-content: space-between;
}

.modal-dialog .alert-warning .close,
.modal-dialog .alert-warning .error-close {
    color: #1f2d3d;
}

.modal-dialog .thumb-wrapper img {
    max-width: 200px;
    width: 100%;
    margin: auto;
    max-height: 300px;
    margin-bottom: 10px;
    border: solid 1px #999;
    filter: drop-shadow(7px 10px 10px #0008);
}

.template-view .ribbon-wrapper{
    right: -4px;
}

.welcome-view .template-set .ribbon-wrapper{
    right: 12px;
}

.welcome-view .template-set .card-container:hover .ribbon-wrapper{
    right:15px;
}
.template-view .thumb-wrapper img,
.reference-view .thumb-wrapper img {
    width: 100%;
    border: solid 1px #999;
    filter: drop-shadow(7px 10px 10px #0008);
}

.pages-view .row-top-info .info-actions{
    text-align: right;
    display:none;
}

.pages-view .row-top-info .edit-info{
    display: none;
    cursor: pointer;
    margin-bottom: 1px;
    padding: 0.16rem 0.5rem;
}

.pages-view .row-top-info .info-title-wrapper{
    border-bottom: solid 1px rgba(0,0,0,0.25);
}

.pages-view .row-top-info .form-control.tag-edit-wrapper{
    height: auto;
}

.pages-view .row-top-info.editable:hover .edit-info {
    display: inline-block;
}

.pages-view .row-top-info.editable.editing:hover .edit-info {
    display: none;
}

.pages-view .row-top-info input,
.pages-view .row-top-info textarea,
.pages-view .row-top-info .tag-edit-wrapper{
    display: none;
}


.pages-view .row-top-info.editable.editing input,
.pages-view .row-top-info.editable.editing textarea,
.pages-view .row-top-info.editable.editing .info-actions,
.pages-view .row-top-info.editable.editing .tag-edit-wrapper {
    display: block;
}

.pages-view .row-top-info.editable.editing .tag-input input.type-zone{
    display: inline-block;
}

.pages-view .row-top-info .saving-block,
.pages-view .row-top-info .saving-error{
    display: none;
}

.pages-view .row-top-info.editable.editing .info-item {
    display: none;
}

.pages-view .btn-grouping > .btn,
.pages-view .btn-grouping > .btn-group{
    margin: 5px 0px;
}

.pages-view .pam-vers-card .list-group-item > span,
.pages-view .pam-connect-card .list-group-item > span {
    display: block;
}

.pages-view .pam-vers-card .temp-thumb-wrapper {
    width: 80px;
    max-height: 80px;
}

.pages-view .pam-vers-card .list-group-item .temp-thumb-wrapper img {
    float: left;
    max-width: 80px;
    max-height: 80px;
    margin-right: 0.75rem;
    border: solid 1px #999;
}

.pages-view .pam-vers-card .list-group-item .btn,
.pages-view .pam-connect-card .list-group-item .btn,
.pages-view .pam-param-card .list-group-item .btn,
.pages-view .pam-param-card .add-parameter.btn,
.pages-view .pam-param-card .modify-parameter.btn {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
    margin-bottom: 5px;
    overflow: hidden;
}

.pages-view .pam-vers-card .list-group-item span.temp-actions,
.pages-view .pam-connect-card .list-group-item span.temp-actions,
.pages-view .pam-param-card .list-group-item span.temp-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
    padding-right: 8px;
    display:flex;
    flex-flow: column wrap;
    align-items: end;
}

.pages-view .pam-vers-card .btn,
.pages-view .pam-connect-card .btn,
.pages-view .pam-param-card .btn {
    display: block;
    transition: width ease-in-out 0.2s;
}

.pages-view .pam-connect-card .list-group-item .details-icon-wrapper img {
    max-width: 60px;
    max-height: 100px;
    float: left;
    padding-right: 10px;
}

.pages-view .pam-vers-card .btn:hover,
.pages-view .pam-connect-card .btn:hover,
.pages-view .pam-param-card .btn:hover {
    transition: width ease-in-out 0.2s;
}

.pages-view .pam-vers-card .btn .btn-text,
.pages-view .pam-connect-card .btn .btn-text,
.pages-view .pam-param-card .btn .btn-text {
    display: none;
}

.pages-view .pam-vers-card .btn:hover .btn-text,
.pages-view .pam-connect-card .btn:hover .btn-text,
.pages-view .pam-param-card .btn:hover .btn-text {
    display: inline;
}

.pages-view .pam-param-card .param-item{
    display: flex;
}

.pages-view .pam-param-card .param-item-icon {
    max-width: 80px;
    max-height: 80px;
    margin-right: 0.75rem;
    font-size:20px;
}

.pages-view .pam-param-card .param-item-name{
    font-size: 100%;
    font-weight: 700;
}

.pages-view .pam-param-card .param-item-desc {
    font-size: 90%;
    color: #6c757d;
    font-style: italic;
}

.pages-view .pam-param-card .param-item-value {
    font-size: 90%;
}

.pages-view .pam-vers-card .pam-delete-version.btn:hover  {
    width: 120px;
}

.pages-view .pam-vers-card .pam-rollback-version.btn:hover {
    width: 140px;
}

.pages-view .pam-vers-card .pam-publish-version.btn:hover {
    width: 100px;
}

.pages-view .pam-connect-card .pam-connect-authenticate.btn:hover,
.pages-view .pam-connect-card .pam-connect-valid.btn:hover {
    width: 150px
}

.pages-view .pam-connect-card .pam-connect-connect.btn:hover,
.pages-view .pam-param-card .pam-edit-parameter.btn:hover,
.pages-view .pam-param-card .add-parameter.btn:hover
{
    width: 120px
}
.pages-view .pam-param-card .modify-parameter.btn:hover{
    width: 160px;
}

.pages-view .pam-connect-card .pam-connect-invalid.btn:hover {
    cursor: pointer;
    width: 120px;
    color: white;
    background-color: #dc3545;
}

.pam-vers-list .list-group-item.card-outline,
.pam-connect-list .list-group-item.card-outline {
    border-top: none;
    border-left: solid 3px transparent;
}

.pam-vers-list .list-group-item.card-outline.card-danger,
.pam-connect-list .list-group-item.card-outline.card-danger {
    border-left-color: #dc3545;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-danger,
.dark-mode .pam-connect-list .list-group-item.card-outline.card-danger {
    border-left-color: #e74c3c;
}

.pam-vers-list .list-group-item.card-outline.card-primary,
.pam-connect-list .list-group-item.card-outline.card-primary {
    border-left-color: #007bff;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-primary,
.dark-mode .pam-connect-list .list-group-item.card-outline.card-primary {
    border-left-color: #3f6791;
}

.pam-vers-list .list-group-item.card-outline.card-success,
.pam-connect-list .list-group-item.card-outline.card-success {
    border-left-color: #28a745;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-success,
.dark-mode .pam-connect-list .list-group-item.card-outline.card-success {
    border-left-color: #00bc8c;
}

.pam-vers-list .list-group-item.card-outline.card-warning,
.pam-connect-list .list-group-item.card-outline.card-warning {
    border-left-color: #ffc107;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-warning
.dark-mode .pam-connect-list .list-group-item.card-outline.card-warning {
    border-left-color: #f39c12;
}

.pam-vers-list .list-group-item.card-outline.card-warning{
    background-color: #fff3cd;
    color: #000;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-warning {
    background-color: #735c00;
    color: #fff;
}

.pam-vers-list .list-group-item.card-outline.card-success {
    background-color: #d4edda;
    color: #000;
}

.dark-mode .pam-vers-list .list-group-item.card-outline.card-success {
    background-color: #005c4c;
    color: #fff;
}

.pam-activity-list .activity-icon {
    float: left;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
    margin-bottom: 5px;
    display: inline-block;
    margin-top: 10px;
    margin-right: 10px;
}

.pam-activity-list .activity-icon.text-success {
    border: solid 1px #28a745;
}

.pam-activity-list .activity-icon.text-danger {
    border: solid 1px #e74c3c;
}

.tooltip-thumb {
    max-height: 300px;
    max-width: 300px;
}

.tooltip-inner{
    max-width:350px;
}

.template-view .info-title-wrapper .info-title {
    display: inline-block;
    padding-bottom: 4px;
}


.template-view .pam-vers-list > .list-group-item.version-hidden,
.template-view .pam-vers-list > .list-group-item.show-less-versions {
    display: none;
}

.template-view .pam-vers-list.all-versions > .list-group-item.version-hidden,
.template-view .pam-vers-list.all-versions > .list-group-item.show-less-versions {
    display: block;
}

.template-view .pam-vers-list.all-versions > .list-group-item.show-more-versions {
    display: none;
}



.embed-code-block {
    border: solid 1px #e83e8c;
    padding: 10px;
    width: 100%;
    display: block;
    position: relative;
}

.embed-code-block .embed-copy-link{
   position: absolute;
   right:5px;
   top: 6px;
   width: 32px;
   text-align:right;
   overflow: hidden;
   white-space: nowrap;
   transition: width 0.2s;
}

.embed-code-block .embed-copy-link.copied{
    width: 90px;
    transition: width 0.2s;
}


.embed-code-block .embed-copy-link .embed-copied-link{
    display: none;
}

.embed-code-block .embed-copy-link.copied .embed-copied-link {
    display: inline;
}

.strong{
    font-weight: 700;
}

.reference-view .btn-grouping .btn,
.template-view .btn-grouping .btn{
    white-space: nowrap;
    overflow-x: hidden;
}

/* data dialog */
.modal .input-group .input-group-prepend.url-options {
    width: 50px;
    cursor: pointer;
    transition: width 0.2s;
}

.modal .input-group .input-group-prepend.url-options:hover {
    width: 118px;
    transition: width 0.5s
}

.modal .input-group .input-group-prepend.url-options:hover .text-success{
    color: white !important;
}

.modal .input-group .input-group-prepend .hover-desc{
    display: none;
    width: 0px;
    font-size: 80%;
}

.modal .input-group .input-group-prepend:hover .hover-desc {
    display: inline-block;
    width: auto;
    padding-left: 4px;
}

/* collection icon modal */
#dlgCollectionIcon.modal .collection-icon-list {
    display: flex;
    flex-wrap: wrap;
    max-height: 200px;
    overflow-y: scroll;
    font-size: 2.5rem;
}

#dlgCollectionIcon.modal .collection-item-icon {
    padding: 0.5rem;
    margin: 0.25rem;
    border: solid 1px transparent;
    width: 80px;
    border-radius: 5px;
    text-align: center;
}

#dlgCollectionIcon.modal .collection-item-icon:hover {
    border-color: rgba(0,0,0,0.25);
    background-color: rgba(0,0,0,0.1);
}

#dlgCollectionIcon.modal .collection-item-icon.active{
    background-color: var(--primary);
    color: var(--white);
}

#checkinChanges .public-publish{
    font-weight: 200;
    font-size: 80%;
}

#checkinChanges .private-publish {
    font-weight: 200;
    font-size: 80%;
}

/* modify param dialog */
.values-wrapper .text-desc{
    margin-top: 0.25rem;
    font-size: 80%;
}
.values-wrapper .is-invalid~.text-desc{
    display: none;
}

.values-wrapper .validation-summary{
    font-size: 80%;
    color: red;
}


/* reference view */
.reference-view .card .card-desc-img {
    max-width: 40%;
    max-height: 400px;
    float: left;
    margin-right: 1.25rem;
}

.reference-view .card .edit{
    display: none;
}

.reference-view.is-editing .card.is-editing .edit{
    display: block;
}

.reference-view.is-editing .card.is-editing .edit.form-row {
    display: flex;
}

.reference-view.is-editing .card.is-editing .reading,
.reference-view.is-editing .card-desc-new{
    display: none;
}

.reference-view.is-editing .card .edit,
.reference-view.is-editing .card .edit-action{
    display: none;
}

/* features view */
.license-features-view .row-features .table thead{
    font-weight: 600;
}

.license-features-view .row-features .table thead .table-head-caption {
    font-weight: 300;
}




.license-features-view .row-features .table td i.fa-check {
    color: var(--brand-color);
}

.license-features-view .row-features .table td i.fa-times {
    color: var(--danger);
}

.license-features-view .row-features .table td.for-role-Publisher,
.license-features-view .row-features .table td.for-role-Editor,
.license-features-view .row-features .table td.for-role-Writer,
.license-features-view .row-features .table td.for-role-Reader {
    text-align:center;
}

.license-features-view .row-features .table.with-role-Publisher td.for-role-Publisher,
.license-features-view .row-features .table.with-role-Editor td.for-role-Editor,
.license-features-view .row-features .table.with-role-Writer td.for-role-Writer,
.license-features-view .row-features .table.with-role-Reader td.for-role-Reader {
    background-color: #6c757d !important;
    color: #fff !important;
}

.license-features-view .row-features .table.with-role-Publisher td.for-role-Publisher a,
.license-features-view .row-features .table.with-role-Editor td.for-role-Editor a,
.license-features-view .row-features .table.with-role-Writer td.for-role-Writer a,
.license-features-view .row-features .table.with-role-Reader td.for-role-Reader a {
    color: #fff !important;
}

.dark-mode .license-features-view .row-features .table.with-role-Publisher td.for-role-Publisher,
.dark-mode .license-features-view .row-features .table.with-role-Editor td.for-role-Editor,
.dark-mode .license-features-view .row-features .table.with-role-Writer td.for-role-Writer,
.dark-mode .license-features-view .row-features .table.with-role-Reader td.for-role-Reader {
    background-color: #343a40 !important;
}

.license-features-view .row-features .table.with-role-Publisher td.for-role-Publisher i.fa-times,
.license-features-view .row-features .table.with-role-Editor td.for-role-Editor i.fa-times,
.license-features-view .row-features .table.with-role-Writer td.for-role-Writer i.fa-times,
.license-features-view .row-features .table.with-role-Reader td.for-role-Reader i.fa-times {
    color: #000 !important;
}

.license-features-view .row-features .table.with-role-Publisher td.for-role-Publisher i.fa-check,
.license-features-view .row-features .table.with-role-Editor td.for-role-Editor i.fa-check,
.license-features-view .row-features .table.with-role-Writer td.for-role-Writer i.fa-check,
.license-features-view .row-features .table.with-role-Reader td.for-role-Reader i.fa-check {
    color: #fff !important;
}

/* responsive */
@media (max-width: 992px) {
    .reference-view .btn-grouping, .template-view .btn-grouping {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
    }
    .reference-view .btn-grouping > .btn,
    .reference-view .btn-grouping > .btn-group,
    .template-view .btn-grouping > .btn,
    .template-view .btn-grouping > .btn-group {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
    }

    .collection-view .temp-actions > .btn-grouping {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: start;
        align-items: stretch;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
        width: 100%;
    }

    .collection-view .btn-grouping > .btn,
    .collection-view .btn-grouping > .btn-group {
        position: relative;
        flex: 1 1 auto;
        margin: 5px 5px;
    }
}

@media (max-width: 575px) {
    .reference-view .btn-grouping,
    .template-view .btn-grouping,
    .collection-view .temp-actions > .btn-grouping {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: start;
        align-items: stretch;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
        width: 100%;
    }

    .reference-view .btn-grouping > .btn,
    .reference-view .btn-grouping > .btn-group,
    .template-view .btn-grouping > .btn,
    .template-view .btn-grouping > .btn-group,
    .collection-view .btn-grouping > .btn,
    .collection-view .btn-grouping > .btn-group{
        position: relative;
        flex: 1 1 auto;
        margin: 5px 5px;
    }

    .sample-actions .btn-grouping .btn .btn-label,
    .temp-actions .btn-grouping .btn .btn-label {
        display: none;
    }
}

@media (min-width: 992px) {
    .reference-view .btn-grouping,
    .template-view .btn-grouping,
    .collection-view .temp-actions > .btn-grouping {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: start;
        align-items: stretch;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
        width: 100%;
    }

    .reference-view .btn-grouping > .btn,
    .reference-view .btn-grouping > .btn-group,
    .template-view .btn-grouping > .btn,
    .template-view .btn-grouping > .btn-group,
    .collection-view .btn-grouping > .btn,
    .collection-view .btn-grouping > .btn-group{
        position: relative;
        flex: 1 1 auto;
        margin: 5px 5px;
    }
}

@media (min-width: 1200px) {
    .reference-view .btn-grouping,
    .template-view .btn-grouping,
    .collection-view .temp-actions > .btn-grouping {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
    }

    .reference-view .btn-grouping > .btn,
    .reference-view .btn-grouping > .btn-group,
    .template-view .btn-grouping > .btn,
    .template-view .btn-grouping > .btn-group,
    .collection-view .temp-actions > .btn-grouping > .btn,
    .collection-view .temp-actions > .btn-grouping > .btn-group {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        margin: 5px 5px;
    }
}

@media (min-width: 1800px){

    .col-xxxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}