:root{
    --background-color: #373737;
    --sidebar-color: #2d2d2d;
    --panel-color: #32393d;
    --section-color: #464646;

    --primary-color: #13b8f0;
    --pale-color: #f4f7fc;
    --secondary-color: #0284fe;

    --color-color: #bdbdbd;
}

*{
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
}

hr{
    border:0;
    border-top: 1px solid whitesmoke;
    width: 100%;
}

main{
    position: absolute;
    left: 54px;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
    background-color: whitesmoke;
    overflow-y: auto;
    transition: all .4s;
    /*box-shadow: -4px 0 10px -10px;*/
    /*background-image: url('/resource/images/logo.png');*/
    /*background-size: 80px auto;*/
    /*background-position: calc(100% - 10px) 10px;*/
    /*background-repeat: no-repeat;*/
    /*background-blend-mode: difference;*/
    /*background-attachment: scroll;*/
    padding: 20px 40px;
}

main.showMenu{
    left: 250px;
    padding: 0 30px;
}

.row{
    flex: 1;
    display: flex;
    flex-direction: row;
}

.col{
    flex:1;
    display: flex;
    flex-direction: column;
    padding: 10px
}

.col-2{
    flex:2;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.no-padd{
    padding: 0;
}

.mid{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.col img,
.row img,
.col-2 img{
    width: 100%;
}

.banner{
    position: fixed;
    top:-50px;
    left:0;
    right:0;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all .4s;
}

.banner.success{
    background: #4CAF50;
    color: white;
}

.banner.show{
    top: 0;
}

.banner.error{
    background: #ff3642;
    color: white;
}

.deleted{
    text-decoration: line-through;
    opacity: 0.6;
}

.table-header+.row{
    border: 1px solid whitesmoke;
    border-top: none;
}