/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Dec 14, 2023, 12:39:59 PM
    Author     : jcoch
*/


@import url('https://fonts.googleapis.com/css2?family=Exo:wght@500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@700&display=swap');

body{

    font-family: 'Exo', sans-serif;
}

h3{
    text-align: center;
}

fieldset{
    min-width: 250px;
}

input, textarea, fieldset{
    padding: 3px 4px 3px 4px;
    border-radius: 5px;
    margin: auto;
    margin-bottom: 6px;
}

button{
    padding: 6px 16px 6px 16px;
    min-width: 100px;
    border-radius: 4px;
    color: darkslategrey;
    font-weight: 700;
    background-color: rgba(240, 255, 240, 1);
}

button:disabled{
    color: #c0c0c0;
}
button:focus{
    border-width: 4px;
}


#tokenWriter > div{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tokenWriter fieldset{
    padding: 20px 0 20px 0;
}

#tokenWriter fieldset > div{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

#tokenWriter p{
    text-align: justify;
}

#tokenTitle{
    width: 200px;
}

#tokenObject{
    width: 200px;
    height: 100px;
}

#buttonBar{
    padding-top: 30px;
}

#helpBox{
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.94);
    color: white;
    z-index: 555;
}
#helpBox > div{
    padding: 10px;
    background-color: black;
}

#helpBox > div > div{
    overflow: auto;
}

#classificationDiv{
    width: 100%;
}

#classifications label{
    margin-right: 10px;
}

#tokenClassificationSystem{
    width: 100%;
    padding-bottom: 20px;

}


#tokenClassificationSystem > div{
    display: flex;
    justify-content: flex-start;

}

#tokenClassificationSystem > div > div{
    flex-grow: 1;
}

#tokenClassificationSystem label{
    margin-left: 5px;
}

#superClass{
    flex-direction: column;
}

#expiryDateDiv > div{
    width: 95%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#expiryDateDiv select{
    margin: 5px;
}

#expiryDiv{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#expiryDiv label{
    margin-left: 5px;
}

#tokenDraft{
}

#tokenDraft > div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#tokenDraft p, #tokenDraft button{
    width: 300px;
    overflow: auto;
    margin: auto;
    margin-top: 5px;
}

.helpCreateButton{

}

.hiddenDiv{
    display: none;
}

.lbutton{
    border-radius: 15px 0 0 15px;
}
.rbutton{
    border-radius: 0 15px 15px 0;
}

.superCat{

}

.mCat{

}

.reCat{

}


@media all and (min-width: 450px){
    fieldset{
        min-width: 420px;
    }
    #tokenTitle{
        width: 200px;
    }

    #tokenObject{
        width: 285px;
        height: 125px;
    }
}

#loadingBar{
    width: 240px;
    height: 14px;
    border: 1px solid black;
    margin: auto;
    margin-top: 10px;
}

.loadBarAnimation{
    animation-name: loading;
    animation-duration: 2s;

}

@keyframes loading {
    0%{
        background-image: linear-gradient(to right, black, black, black, black, black);
    }
    20%{
        background-image: linear-gradient(to right, white, black, black, black, black);
    }
    40%{
        background-image: linear-gradient(to right, white, white, black, black, black);
    }
    60%{
        background-image: linear-gradient(to right, white, white, white, black, black);
    }
    80%{
        background-image: linear-gradient(to right, white, white, white, white, black);
    }
    100%{
        background-image: linear-gradient(to white, white, white, white, white, white);
    }
}