body {
    font-family: sofia-pro, sans-serif;
    height: 100vh;
    background-color: #151517;
    color: #f6f6f6;
    font-size: 14px;
    scrollbar-width: none;
    overflow:hidden;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 4px; /* Adjust width of the vertical scrollbar */
    height: 4px; /* Adjust height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #151517; /* Color of the track (background) */
}

::-webkit-scrollbar-thumb {
    background: #545455; /* Color of the scroll thumb */
    border-radius: 2px; /* Rounded corners on the scroll thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #202020; /* Color of the scroll thumb on hover */
}

.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    white-space: nowrap;
    flex-direction: row;
    padding:0;
    flex: 1;
    overflow:hidden;
    width: 100%;
    position: relative;
    transition: width 0.3s;  /* smooth transition */
}

.content-wrapper .manager-container {
    overflow:hidden;
}

.wrapper .header, .wrapper .footer, .wrapper .content-wrapper {
    width: 100%;
    transition: width 0.3s;
}

.content-header h1 {
    font-size:22px;
    padding-bottom:2em;
}

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3em 3em 2em 3em;
    transition: all 0.3s;  /* smooth transition */
    flex-shrink: 0;
}

.footer {
    position:sticky;
    bottom:0;
    z-index:1000;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    height:4em;
    transition: all 0.3s;  /* smooth transition */
    flex-shrink: 0;
}

.header-logo {
    max-width:50%;
}

.header-menu {
    max-width:50%;
    font-size:22px;
}

.content-container {
    height:100%;
    padding: 4em 4em 0 4em;
    overflow-y: auto;
}

.detail-container {
    padding-bottom:2em;
}

.row.details {
    margin-left:0;
    padding-left:0;
}

.detail-container h2 {
    font-size:18px;
    padding-bottom:1em;
}

.detail-container h3 {
    font-size:16px;
    padding-bottom:1em;
}

.content-wrapper .content-header {
    text-align: center;
}

#languageForm {
    padding:0;
    margin:0;
}

.popup-wrapper {
    display: none;
    background-color: #151517;
    border:3px solid #1d1d1d;
    border-radius:4px;
    z-index: 998;
    padding:0;
    margin: 2em 2em 2em 4em;
    overflow: hidden;
    height: 100%;
    width: 90%;
    position: relative;
    transition: width 0.3s;
}

.popup-wrapper.popup-open {
    display: flex;
    flex-direction: column;
}

.popup-header {
    display:block;
    position:absolute;
    top: 0;
    right:0;
    padding:1em;
    width:4em;
    height:4em;
    text-align: center;
}

.popup-close {
    cursor: pointer;
    font-size: 16px;
}

.popup-content {
    padding:2em;
    margin:0;
    overflow-y: auto;
    flex:1;
}

.import-result h5, .import-result h6 {
    padding: 0.25em 0 0.25em 0;
}

dl.import-error-details, dl.import-success-details {
    margin-left:0.5em; 
    font-size:0.9em;
}

dl.file-error dd, dl.file-success dd {
    padding-left:2.5em;
    font-size:0.9em;
}

.import-success-details .create-revision-row, .import-success-details .activate-revision-row {
    display:flex;
    width: 100%;
}

.submitRevision .descriptionInput {
    width: 80%;
    background-color: #28282c;
    color:#f6f6f6;
    outline: none !important;
    border: 1px solid #3b3b3b;
    padding-left:0.5em;
}

.import-result h6.import-header {
    padding-top:2em;
    padding-bottom:1.5em;
}

.import-result h5.import-header {
    padding-bottom:1.5em;
}

.import-result .activate-revision {
    display: flex;
}

.popup-wrapper .navigation-footer {
    background: linear-gradient(to top, #1b1b1f, #151517);
    height:6em;
    padding-top:2em;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}

.navigation-footer .navigation-row {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    font-size: 1.1em;
}

.navigation-row .navigation-button {
    padding:0;
    margin: 0 2em 0 2em;
    min-width: 6em;
}

.popup-wrapper .inner-content {
    display: flex;
    flex: 1;
    margin-top: 1em;
    padding: 1em;
}

.popup-wrapper .container-fluid {
    height:100%;
    display:flex;
    flex-direction: column;
    padding-bottom: 4em;

}

.details-actions-container {
    display:flex; 
    justify-content: space-evenly; 
    flex-direction: column; 
    height:100%;
    padding: 0 0 2em 6em;
}

.space-divider-column {
    pointer-events: none;
}