* {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica", "Segoe UI",
    Roboto, Ubuntu;
    font-size: 14px;
    line-height: 1.2em;
    background: #D386FF08;
    color: #222;
}


ul {
    list-style-type: none;
}

ul li {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica", "Segoe UI",
    Roboto, Ubuntu;
    font-size: 14px;
    line-height: 1.5em;
}

ul li:hover {
    background-color: #D386FF15;
    margin-right: 32px;
}
hr {
    margin: 10px 0px;
    margin-right: 32px;
    border-top: 0.5px solid #cccccc;
    border-left: 0.5px solid #cccccc;
    border-bottom: none;
}

a {
    text-decoration: none;
}

a {
    color:#CA7EEF;
}

a:hover {
    color: #A35CD7;
}

a:visited {
    color: #AB6CCF;
}

img {
    width: 24px;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
    padding: 10px;
}

table tr {
    height: 24px;
}

table td {
    padding: 5px;
}
.wrapper {
    margin: 16px auto;
    max-width: 80%;
}

.small_wrapper {
    margin: 16px auto;
    max-width: 60%;
}

.invoice_wrapper {
    margin: 16px auto;
    width: 90%;

}

header {
    text-align: center;
    padding: 16px;
    
}


header nav {
    margin-top: 16px;
    margin-bottom: 16px;
}

main {
    margin-top: 0px;
  

}


#all-content{

}



#blog article {
    margin: 32px 0px;
}

@media (max-width: 999px) {
    
    #menu-content {
        padding: 0px 16px;
        float: left;
    }

    #menu-header {
        
    }

    #menu-body{
        display: none;

    }
    

    #main-content {
        padding: 0px 16px;
        margin-left: 0px;
        float: left;
        background-color: #ffffff;
    }
    
    .only-big{
        display: none;
    }
    
    header img {
        width: 32px;
    }


}

@media (min-width: 1000px) {
    #menu-content {
        padding: 0px 16px;
        width: 200px;
        float:  left;
    }
    
    #menu-header {
        
    }
    
    #menu-body{
        
    }

    #only-big{
        
    }
    
    #main-content {
        padding: 0px 16px;
        margin-left: 200px;
        background-color: #ffffff;
    }
    
    header img {
        width: 64px;
    }


}

@media (min-width: 900px) {}

@media (min-width: 1200px) {}

@media (min-width: 1800px) {}



header {
    margin: auto;
}

header h1 {
    color: #000;
}


label {
    display: block;
    padding: 5px;
    font-weight: bold;
}

label.inline {
    display: inline;
    padding: 5px;
    font-weight: bold;
}

input {
    display: block;
    padding: 8px;

    font-size: 16px;
}

input.field {
    background: #fff;
    color: #000;
    
}

input.submit {
    border-width: 4px;
    border-style: solid;
    padding: 8px 16px;
}

input.submit:hover {
    cursor: pointer;
}

input.submit {
    color: #fff;
    background: #2B7DF6
    border-color: #2B7DF6;
}

input.submit:hover {
    background: #555BCF;
    border-color: #555BCF;
}

input.loginField {
    background: #fff;
    color: #000;
    magin: auto;
}

/* dark mode colors */

@media (prefers-color-scheme: dark) {
    
     body {
         background: #08060Cf0;
         color: #ffffffff;
          
      }

    #main-content{
        background-color: #111111ff;
    }

    hr {
        border-color: #333;
    }
    
    a {
        color: #3386F7;
    }
    
    a:hover {
        color: #5B61DE;
    }
    
    a:visited {
        color: #B365EA;
    }
        
    header h1 {
        color: #fff;
    }
    


        input.field {
            background: #000;
            color: #fff;
        }

    input.submit {
        color: #fff;
        background: #3386F7;
        border-color: #3386F7;
    }
    
    input.submit:hover {
        background: #5B61DE;
        border-color: #5B61DE;
    }
    
    .chevron {
        -webkit-filter: invert(1);
        filter: invert(1);

    }


 
}
header {
    text-align: center;
    padding: 16px;
}



.rounded {
    border-radius: 15px;
    background: #D386FF10;
    padding: 20px;
    
}

.alignTop {
    vertical-align: top
}
.opener {

    display: flex;
    align-items: center;
    vertical-align: baseline;
}

.spacer{
    flex-grow: 1;
}

.fixedSpacer{
    display: inline;
    width: 40px;
}

.inline{
    display: inline;
}


.rotated{
    animation: rotate 0.5s forwards;
 
}

.leftToRight{
    display: flex;
}

.rightToLeftt{
    display: flex;
    horizontal-align: 
}


.right{
    width: 500px;
}
.left{
    width: 600px;
}


@keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(90deg); }
}
.myButton {
    color: #2B7DF6;
    cursor: pointer;
}
.bigImg {
    width: 600px;
    height: 850px;
}

.errorMsg {
    color: red;
}

#divConfirmationElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -512px;
    width: 1024px;
    height: 400px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;

}

#generalConfirmation {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
    width: 800px;
    height: 400px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;

}
#enterServiceDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    width: 500px;
    height: 450px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;
}

#enterArticleDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -250px;
    width: 500px;
    height: 200px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;
}


#dadesPagamentDialog{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -175px;
    width: 300px;
    height: 400px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;
}

#dadesAnticipDialog{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;
}


.tableSmall {
    vertical-align: top;
    width: 30%;
}
.tableRest {
    vertical-align: top;
    width: 68%;
}

.topdown {
    display: flex;
    align-items: top;
    vertical-align: top;
}

.amountField {
    display: inline;
    width: 120px;
}

#loginDiv {
    text-align: center;

}

.list-header {
    display: flex;
    align-items: center;
    padding: 16px;
    vertical-align: top;
    
}

.bal-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.bal-left {
    order: 1;
    margin-top: 50px;
    
}
.bal-right {
    order: 2;
    margin-top: 50px;
    
}


.list-header img {
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

.list-header h2 {
    display: flex;
    align-items: left;
    vertical-align: top;
}


.list-wrapper {
    margin: 16px auto;
    width: 800px;
    
}

.float-container {
    display:inline-block;
    margin: 16px auto;
    
}

.float-child1 {
    width: 800px;
}
.float-child2 {
    
    float: right
}

.blueColor {

    color: #2E2EAD;

}
#divSelectorElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -350px;
    width: 700px;
    height: 400px;
    border-radius: 25px;
    background: #F3F3F8;
    padding: 20px;

}
.dashboard {
    border: 1px solid black;
    border-collapse: collapse;

}
.dashboardheaderrow{
    border-bottom: 1px solid black;

}
.dashboardrow{
    border-top: 1px solid lightgray;

}

#infoTable {
    display:block;
    height:300px;
    width:800px;
    overflow:auto;
}

.tableInfo {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}

tr.yellow {
    background-color: LightGoldenRodYellow;
}
@media print {
    .break-page {
        page-break-after: always;
    }
}