html {
  font-size: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

body {
    padding-top: 70px;
}

.table-scroll-container{
    /*Set a maximum height for the scrollable area*/
    max-height:500px;
    /*Enable vertical scrolling*/
    overflow-y:auto;
}

.table-scroll-container thead th{
    /*The key to making it sticky*/
    position:sticky;
    top:0;
    /*Ensure the header is above the scrolling content*/
    z-index:10;
}
.round-button{
    background-color:#ffeb3b;
    border:none;
    color:white;
    text-align:center;
    text-decoration:none;
    display:flex;
    cursor:pointer;
    border-radius:25px;
    width:40px;
    height:40px;
    padding:0;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    transition:width 0.3s ease-in-out,background-color 0.3s;
    white-space:nowrap;
}
.button-text{
    opacity:0;
    transition:opacity 0.3s ease;
    margin-left:8px;
    font-size:14px;
    font-weight:bold;
    color:white ;
}
.round-button:hover{
    background-color:#45a049;
    justify-content:center;
    width:140px;
    padding-left: 12px;
}
.round-button:hover.button-text{
    opacity:1;
    color:white !important;
    /*display:inline;*/
}
/*Enable hover for nested dropdowns on desktops*/
@media(min-width:768px){
    .dropend:hover > .dropdown-menu{
        display:block;
        position:absolute;
        top:0;
        left:100%;
        margin-top:-1px;
        /*font-weight:bold;*/
    }
}
/*Optional styling to ensure the text remains white*/
.dropdown-item.text-white:hover{
    color:#000 !important;
    background-color:#f8f9fa;
    /*font-weight:bold;*/
}

/*Preview Styles (What you see on screen)*/
.preview-area {
    background: #525959;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.document-page {
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition : all 0.3s ease;
}

/*Portrait Preview Size */
.document-page.portrait{
    width:210mm;
    min-height: 297mm;
}
/*Landscape Preview Size*/
.document-page.landscape{
    width: 297mm;
    min-height: 210mm;
}