/* common classes */

body {
  overflow-x: hidden;
  font-weight: 400;
  background-color: var(--page-bg);
  color: var(--page-txt);
}

.app-main {
    margin: clamp(1.5rem, 2vw + 1rem, 3rem);
}

.page-btn {
    display: block;
    padding: .5rem 1rem;
    /*background-color: var(--btn-secondary-bg);*/
    color: var(--page-txt);
    border-radius: var(--border-radius-sm);
    /*border: 1px solid var(--page-txt);*/
}


.page-btn-corner {
    min-width: 350px;
    width:20%;
    margin-left: auto;
}

@media (max-width: 750px) {
    .page-btn-corner {
        width: 100%;
        min-width: 0;
    }
}

.page-btn:hover {
    text-decoration: none;
    color: var(--page-txt);
}

.page-btn.active {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-txt);
}

.page-title {
    color: var(--page-txt);
}

.page-search {
    border: 1px solid #ddd;
    border-radius: var(--border-radius-sm);
    background-color: var(--pane-bg);
    height:40px;
    padding: 0 10px;
}

.pane {
    background-color: var(--pane-bg);
    color: var(--pane-txt);
    padding: clamp(.5rem, 2vw + .5rem, 1.5rem);
    border-radius: var(--border-radius-md);
    border: 1px solid #ddd;
}

.pane-link {
    color: var(--pane-link);
    text-decoration: none;
}

.pane-link-btn {
    color: var(--pane-link);
    border: 1px solid var(--pane-link);
}

.pane-text {
    margin: 0;
}