* {
box-sizing:border-box;
}

body, html {
margin:0px;
padding:0px;
}

body {
    background-image: none;
}

.button {
    border-radius:10px;
    cursor: pointer;
}
.dist {
    height: 0.5em;
}

h1.admin-h1 {
    margin-bottom:1em; 
    border-bottom: 1px solid rgb(200,200,200); 
    padding-bottom: 0.5em;
}



/*FORM*/
form {
    margin:0px 0px 20px;
    border:none;
    border-radius: 3px;
    padding: 0px;
}
form input, form select, textarea {
    margin-bottom: 10px;    
    border:1px solid rgb(200,200,200);
    border-radius: 0px;
    padding:10px;
}
form input[type="text"], form input[type="password"], textarea {
    width: 90%;
}
form input[type="text"]:focus, form input[type="password"]:focus,textarea:focus {
    border:1px solid rgb(200,150,0);
}
form input[type="submit"],form input[type="button"],form input[type="reset"] {
    background-color: #1BE2DB !important;
    color:#000 !important;
    padding:10px 20px !important;
    margin-top:20px;
    margin-bottom:20px;
    border:none !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all .5s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
}
form input[type="checkbox"] {
    margin-bottom: 1em;
}
form input[type="submit"]:hover,form input[type="button"]:hover, form input[type="reset"]:hover {
    background-color: #000 !important;
    color:#fff !important;
    transform: translateY(-5px);
}

a.button, div.button {
    background-color: rgb(255,200,0);
    cursor:pointer;
    padding: 0.3em 1em;
}
a.button:hover, div.button:hover  {
    background-color: rgb(255,0,0);
    color: rgb(255,255,255);
}


/*TABLE-DATAGRID*/
table.datagrid {
    /*border:1px solid #52b3bc;*/
    width: 100%;
}
table.datagrid td {
    padding: 0.5em 0.3em;
    vertical-align: top !important;
    
}
table.datagrid th {
    background-color: rgb(220,220,220);
    color:rgb(0,0,0);
    padding: 0.5em;
    font-weight: bold;
}
table.datagrid td.odd {
    background-color: rgb(255,255,255);
    border-right: 1px solid rgb(240,240,240);
    
}
table.datagrid td.even {
    background-color: rgb(240,240,240);
    border-right: 1px solid rgb(255,255,255);
    
}
table.datagrid td:last-of-type {
    border-right:0px;
}
table.datagrid td.table-footer {
    /*background-color: rgb(150,200,250);*/
    background-color: rgb(220,220,220);
    height: 10px;
    padding: 0px;
}

/* TOOLBAR ======================================================================*/
.toolbar {
    /*margin: 0.5em 1%;*/
    padding: 0.3em;
    background-color: rgb(255,255,240);
    margin-bottom: 1em;
}
a.button {
    background-color: #55aaff;
    color:#ffffff;
    padding:10px 20px !important;
    border:none !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    cursor: pointer;
    margin-bottom:20px;
}
a.button:hover {
    background-color: #000 !important;
    color:#fff !important;
}

.alert-btn {
    background-color: #ff5555 !important;
    color:#ffffff !important;
    margin-top:20px;	
}
.alert-btn:hover, #BtnOk:hover, #btnOk:hover, #btnOk:hover {
    background-color: #000 !important;
    color:#fff !important;
}


a.inline-button {
    background-color: rgb(230,230,230);
    border:1px solid rgb(200,200,200);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    cursor: pointer;
}
a.inline-button:hover {
    background-color: rgb(255,0,0);
    color: rgb(255,255,255);
}

a.inline-button-selected {
    background-color: rgb(255,200,0);
    border:1px solid rgb(200,200,200);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    cursor: pointer;
}


.subgrid {
    display:none;
    padding-left: 2px;
    padding-right: 1px;
}

.subgrid table th {
    background-color: rgb(200,200,200);
    height: 5px;
    padding: 0px 0.5em;
    color: rgb(200,200,200);
    overflow: hidden;
}


.articles .subgrid table th {
    background-color: rgb(100,150,200);
    height: auto;
    padding: 0.5em;
    color: rgb(255,255,255);
    overflow: auto;
}

div.clear {
    clear: both;
}

.register {
    color: #0654BA;
}


.card {
    margin-top:50px;
    margin-bottom:50px;
    margin-left:50px;
    background-color:#fff;
    padding:30px;
    border-radius:20px;
}

#left-col {
    background-color: #323232; 
    color:#fff; 
    border-right:1px solid rgb(220,220,220); 
    min-height: 100vh;
}

.main-col {
    padding:30px 50px;
}

.mobile-menu-container {
    position:fixed;
    z-index:99;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:#ddd;
    padding:20px;
    padding-top:40px;
    font-size: 25px;
    line-height: 40px;
}

.popup-body {
    padding:40px;
}

.menu-icon {
    width:20px;
}

@media (max-width:750px) {
    .main-col {
        padding:0px;
        min-height:100vh;
    }
    
    .card {
        margin:0px;
        background-color:#fff;
        padding:20px;
        border-radius:0px;
    }

    .datagrid-container {
        max-width:100%;
        overflow-x:scroll;
    }

    .col-4, .col-8 {
        width:100% !important;
    }

    .popup-body {
        padding:10px;
    }
}