/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

.servicex-logo{
    background-image: url(ServiceXLogo.svg);
}

#setting-editor .servicex-logo {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

a{
    color: #007bff;
}

#firstLastButton{
    border-radius: 0px;
    background-color: white;
    color: #007bff;
    border: 0.5px solid gray;
    width: 20px;
    height: 22.5px;
}

#firstLastButton:active{
    transform: scale(0.98);
    box-shadow: 1.5px 1px 20px 1px rgba(0, 0, 0, 0.24)
}

#firstLastButton:hover{
    filter: grayscale(20%);
    cursor: pointer;
}

#paginationButton{
    border-radius: 0px;
    width: 20px;
    height: 22.5px;
    font-size: 12px;
    text-align: center;
}

#paginationButton:active{
    transform: scale(0.98);
    box-shadow: 1.5px 1px 20px 1px rgba(0, 0, 0, 0.24)
}

#paginationButton:hover{
    filter: grayscale(20%);
    cursor: pointer;
}

.my-apodWidget {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#requestTable{
    background-color: white;
    border-collapse: collapse;
    border: 0.5px solid gray;
}

tr:nth-child(even) {
    background-color: white;
}

tr:nth-child(odd) {
    background-color: lightgray;
}

th{
    background-color: #343a40;
    padding: 5px 10px;
    border: 0.5px solid gray;
    font-weight: bold;
    color: white;
    text-align: left;
    height: 36.67px;
    width: 48.35px;
    position: sticky;
    top: 0
}

td{
    padding: 5px 10px;
    border: 0.5px solid gray;
    text-align: top;
    width: 48.35px;
}

#header{
    background-color:  white;
    font-size: 20px;
    font-weight: 500;
    margin: 7.5px 0px;
    float: left;
}

#cancelButton{
    background-color: #dc3545;
    border: none;
    color: white;
    border-radius: 0.25rem;
    font-size: 12px;
    width : 45px;
    height: 24.75px;
    text-align: center;
}

#cancelButton:active{
    transform: scale(0.98);
    box-shadow: 1.5px 1px 20px 1px rgba(0, 0, 0, 0.24)
}

#cancelButton:hover{
    filter: grayscale(20%);
    cursor: pointer;
}

.progressBar{
    background-color: #007bff;
    display: block;
    height: 15px;
    border-radius: 6px;
    text-align: center;
    color: white;
    font-size: 12.5px;
    transition: 1s;
}

.progressBarStripes{
    background-size: 1rem 1rem;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    animation: slide 1s linear infinite;
}

@keyframes slide{
   from {
    background-position: 15px,0
   }    
   to {
    background-position: 0,0 
   }
}

/*
#inputButton{
    width: 20px;
    height: 10px;
    margin: 5px 0 0 5px;
    border: 0.5px solid gray;
    font-size: 10px;
}

#inputButton:hover{
    filter: grayscale(20%);
    cursor: pointer;
}

#inputButton:active{
    transform: scale(0.98);
    box-shadow: 1.5px 1px 20px 1px rgba(0, 0, 0, 0.24);
}*/

.dropdown{
    position: relative;
    display: inline-block
}

.dropdownButton{
    width: 400px;
    height: 20px;
    border: 0.5px solid gray;
    background: white;
    text-align: left;
    font-size: 12px;
}

.dropdownButton:hover{
    cursor: pointer;
}

.dropdownDiv{
    display: none;
    /*position: absolute;*/
    background-color: #f1f1f1;
    min-width: 400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownDiv a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
    font-size: 12px;
}

.dropdownDiv a:hover{
    background-color: lightgray;
}

.show{
    display: block;
}

#exit{
    width: 15px;
    height: 15px;
    float: right;
    border: none;
    border-radius: 0px;
    background-color: #dc3545;
    color: white;
}

#exit:active{
    transform: scale(0.98);
    box-shadow: 1.5px 1px 20px 1px rgba(0, 0, 0, 0.24)
}

#exit:hover{
    filter: grayscale(20%);
    cursor: pointer;
}