@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root{
    --grey: #F2F2F2;
    --grey-hover:#e4e4e4;
    --radius3: 10px;
    --radius: 15px;
    --radius2: 30px;
    --black: #131313;
    --orange: #f07e00;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0;
    overflow-x: hidden;
    height:100%;   
}
.nav{
    width:200px;
    background:var(--grey);
    height:100%;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
}
.nav p{
    margin:0;
    padding:10px 20px;
    border-bottom:3px solid var(--grey-hover);

}
.nav a,
.nav input{
    color:var(--black);
    display:block;
    width:calc(100% - 40px);
    padding:10px 20px;
    border-bottom:1px solid var(--grey-hover);
    text-decoration: none;
    background:var(--grey);
    transition:.2s;
    margin:0;
    border:none;
    text-align:left;
    font-size:1rem;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}
.nav input{
    width:100%;
}
.nav a:hover,
.nav input:hover{
    background:var(--orange);
    color:var(--grey);
}
.content{
    margin:50px 250px;
}
table{
    width:50%;
    margin-top:50px;
}
table,tr,td{
    border-collapse: collapse;
}
table tr:nth-child(1){
    font-weight:800;
    border-bottom:2px solid var(--orange);
    background:#fff!important;
    text-align: center;
}
table tr td:not(:nth-child(1)){
    text-align: center;
}
table tr:nth-child(even){
    background:var(--grey);
}
table tr:nth-child(odd){
    background:var(--grey-hover);
}
table td{
    padding:10px;
}
table td:nth-child(1){
    width:60%;
}
table a{
    margin-left:10px;
    text-decoration: none;
    color:var(--black);
    transition: .2s;
    font-weight:unset!important;
    background:unset!important;
    padding:unset!important;
    border-radius:unset!important;
}
table a:hover{
    color:var(--orange);
}
.content a.btn{
    padding:10px 20px;
    border-radius:var(--radius3);
    background:var(--grey);
    text-decoration: none;
    color:var(--black);
    font-weight:600;
}
.content a.btn:hover{
    color:var(--orange);
    background:var(--grey-hover);
    
}
.content form{
    width:50%;
}
.content form input{
    display:block;
    width:100%;
    margin-top:20px;
    padding:10px;
    border:none!important;
    background:var(--grey);
    border-radius:var(--radius3);
    resize:none;
    font-family: 'Montserrat', sans-serif;
}
.ql-toolbar{
    margin-top:20px;
}
.content form #editor{
    height:500px;
}
.content form input:active,
.content form textarea:active,
.content form input:focus-within,
.content form textarea:focus-within{
    background:var(--grey-hover);
    border:none;
    outline:none;
}
.content form p{
    margin:20px 0 -20px 0;
}
.content h1{
    margin:10px 0;
    font-size:1.8rem;
}
.content form button{
    padding:10px 20px;
    border:none;
    font-family: 'Montserrat', sans-serif;
    width:50%;
    border-radius:var(--radius3);
    font-weight:600;
    cursor: pointer;
    transition: .2s;
    color:var(--grey);
}
.content form button.update,
.login input[type="submit"]{
    margin:20px 0 0 0;
    background:darkgreen;   
}
.content form button.update:hover,
.login input[type="submit"]:hover{
    background:rgb(0, 134, 0);   
}
.content form button.remove{
    background:darkred;
}
.content form button.remove:hover{
    background:rgb(194, 0, 0);
}
.pagination{
    margin-top:50px;
}
.pagination a,
.pagination span{
    padding:10px;
    background:var(--grey);
    color:var(--black);
    text-decoration: none;
    margin-left:10px;
    border-radius:var(--radius3);
    transition:.2s;
}
.pagination span{
    border:2px solid var(--orange);
    color:var(--orange);
}
.pagination a:hover,
.pagination span:hover{
    background:var(--grey-hover);
    color:var(--orange);
}
.login{
    margin:50px;
    padding:20px 40px;
    background:var(--grey);
    display:table;
    border-radius: var(--radius);
    color:var(--black);
    width:300px;
    border:2px solid var(--grey-hover);
}
body.lgn{
    background:url("../../assets/img/farska3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.login input,
.login button{
    width:calc(100% - 20px);
    padding:10px;
    border:none;
    margin-top:10px;
    display:block;
    font-family: 'Montserrat', sans-serif;
    border-radius:5px;
}

.login input[type="submit"]{
    margin-top:20px;
    width:100%;
    font-family: 'Montserrat', sans-serif;
    font-weight:600;
    cursor: pointer;
    color:var(--grey);
}
.login input:active,
.login input:focus-within{
    background:var(--grey-hover);
    border:none;
    outline:none;
}