* {
    margin: 0;
    padding: 0;
}

body {
    font-family: roboto;
    background: white;
}

.material-icons {
    cursor: pointer;
}

.invoice-container {
    margin: auto;
    padding: 0px 20px;
}

.invoice-header {
    display: flex;
    padding: 70px 0%;
    width: 100%;
}

.title {
    font-size: 18px;
    letter-spacing: 3px;
    color: rgb(66, 66, 66);
}

.date {
    padding: 5px 0px;
    font-size: 14px;
    letter-spacing: 3px;
    color: rgb(156, 156, 156);
}

.invoice-number {
    font-size: 17px;
    letter-spacing: 2px;
    color: rgb(156, 156, 156);
}


.space {
    width: 50%;
}

@media screen and (max-width: 480px) {
    table {
        table-layout: auto;
        width: 54% !important;
    }

    .invoice-body{
        min-width: 690px !important;
    }

    #sum {
        text-align: right;
        width: 30%;
    }
}

/*@media screen and (min-width: 480px) {
  table {
        table-layout: auto;
        width: 54%;
    }
    
    #sum {
        text-align: right;
        width: 100%;
    }
}*/

table {
    table-layout: auto;
    width: 100%;
}
table, th, td {
    border-collapse: collapse;
  }

th {
    padding: 10px 0px;
    border-bottom: 1px solid rgb(187, 187, 187);
    border-bottom-style: dashed;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 2px;
    color: gray;
    text-align: left;
    
}


td {
    
    border-bottom: 0.5px solid rgb(226, 226, 226);
    text-align: left;
    

    
}

.dashed {
    border-bottom: 1px solid rgb(187, 187, 187);
    border-bottom-style: dashed;
}

.total {
    font-weight: 800;
    font-size: 20px !important;
    color: black;
}

textarea {
    border: none;
    outline: none;
}

.max_width {
    max-width: 240px !important;
}

input[type=number] {
    text-align: center ;
    max-width: 50px;
    font-size: 15px;
    /*padding: 10px;*/
    border: none;
    outline: none;
}

input[type=text] {
    max-width: 170px;
    text-align: left;
    font-size: 15px;
    /*padding: 10px;*/
    border: none;
    outline: none;
    /*margin: 2px;*/
}

input[type=text]:focus {
    border-radius: 5px;
    background: #ffffff;
    box-shadow:  11px 11px 22px #d9d9d9, 
             -11px -11px 22px #ffffff;
}

input[type=number]:focus {
    border-radius: 5px;
    background: #ffffff;
    box-shadow:  11px 11px 22px #d9d9d9, 
             -11px -11px 22px #ffffff;
}
/*Hide Arrows From Input Number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.float{
    
    width:40px;
    height:40px;
    background-color:#FF1D89;
    color:#FFF;
    border-radius:100%;
    text-align:center;
    box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.048),
  0 6.7px 5.3px rgba(0, 0, 0, 0.069),
  0 12.5px 10px rgba(0, 0, 0, 0.085),
  0 22.3px 17.9px rgba(0, 0, 0, 0.101),
  0 41.8px 33.4px rgba(0, 0, 0, 0.122),
  0 100px 80px rgba(0, 0, 0, 0.17);
}

.float:hover {
    background-color:#ff057e;
}

.plus{
    margin-top:10px;
}

#sum {
    text-align: right;
    width: 100%;
}

/*#sum input[type=text] {
    width: 100%;
    font-size: 33px !important;
    color: black;
    text-align: right !important; 
}*/

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body {
        background: lemonchiffon;
    }
    .invoice-container {
        border: solid 1px gray;
        width: 60%;
        margin: 50px auto;
        padding: 40px;
        padding-bottom: 100px;
        border-radius: 5px;
        background: white;
        box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.02),
  0 6.7px 5.3px rgba(0, 0, 0, 0.028),
  0 12.5px 10px rgba(0, 0, 0, 0.035),
  0 22.3px 17.9px rgba(0, 0, 0, 0.042),
  0 41.8px 33.4px rgba(0, 0, 0, 0.05),
  0 100px 80px rgba(0, 0, 0, 0.07);
    }

    .title-date {
        width: 20%;
    }
    .invoice-number {
        width: 20%;
    }
    .space {
        width: 80%;
    }

}
.invoice-wrapper{
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    padding-top: 20px;
    padding-bottom: 20px;
}
.invoice{
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
    background-color: var(--white-color);
    padding: 70px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    min-height: 920px;
}
.invoice-head-top-left img{
    width: 250px;
}
.invoice-head-top-right h3{
    font-weight: 500;
    font-size: 27px;
    color: var(--blue-color);
}
.invoice-head-middle, .invoice-head-bottom{
    padding: 16px 0;
}
.invoice-body{
    /*border: 1px solid rgba(0, 0, 0, 0.1);*/
    border-radius: 4px;
    overflow: hidden;
}
.invoice-body table{
    border-collapse: collapse;
    border-radius: 4px;
    /*width: 100%;*/
}
.invoice-body table td, .invoice-body table th{
    padding: 0px;
}
.invoice-body table tr{
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.invoice-body table thead{
    background-color: rgba(0, 0, 0, 0.02);
}

.invoice-body-info-item{
    display: grid;
    grid-template-columns: 80% 20%;
}
.invoice-body-info-item .info-item-td{
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.02);
}
.invoice-foot{
    padding: 30px 0;
}
.invoice-foot p{
    font-size: 12px;
}
.invoice-btns{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.invoice-btn{
    padding: 3px 9px;
    color: var(--dark-color);
    font-family: inherit;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.invoice-head-top, .invoice-head-middle, .invoice-head-bottom{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 10px;
}

@media screen and (max-width: 992px){
    .invoice{
        padding: 40px;
    }
}

@media screen and (max-width: 576px){
    .invoice-head-top, .invoice-head-middle, .invoice-head-bottom{
        grid-template-columns: repeat(1, 1fr);
    }
    .invoice-head-bottom-right{
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .invoice *{
        text-align: left;
    }
    .invoice{
        padding: 28px;
    }
}

.overflow-view{
    overflow-x: scroll;
}
.invoice-body{
    min-width: 600px;
}

@media print{
    .print-area{
        visibility: visible;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .overflow-view{
        overflow-x: hidden;
    }

    .invoice-btns{
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    /*body {
        background-color: lightblue !important;
      }*/
    .temp {
        width:50% !important;
        font-size: 100px !important;
    }
}

#frm{  
    border: solid gray 1px;  
    width:30%;  
    border-radius: 2px;  
    margin: 120px auto;  
    background: white;  
    padding: 50px;  
}  
#btn{  
    color: #fff;  
    background: #337ab7;  
    padding: 7px;  
    margin-left: 40px;
    margin: 10px;  
} 

.uname {
    border: solid black 1px !important;
    padding: 10px;
    width: 100% !important;
    max-width: 100% !important;
}

.pass {
    width: 100% !important;
    text-align: left;
    font-size: 15px;
    padding: 10px;
}


@media print {
    body {-webkit-print-color-adjust: exact;}
}