body {
    background-color: #1A1818;
    margin: 0;
}

.app {
    font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
    text-align: center;
/*
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
*/
    background: #1A1818;
    width: 60%;
    height: auto;
    padding: 0 0px;
}

#root {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1818;
}

.headr-logo {
    width: auto;
    max-width: 100%;
    float: left;
    margin-bottom: 20px;
    background: #1A1818;
    text-align: left;
}

.alert-success {
    display: inline-block important;
}


a.disabled {
  pointer-events: none;
  cursor: default;
  background: #d6d5d5 !important;
  color: #f1f1f1 !important;
  
}

table.btn-wrapper  tr td.half-size{
	width:50%
}

.head-title{
    background: #1a1818;
    color: #fff;
    padding: 10px;
	font-size: 17px;
    letter-spacing: 1px;
}

li.select2-selection__choice {
    font-size: 14px !important;
}


.btn-add-part-code{
	background: #212529;
    color: #fff;
    border-radius: 1px;
    padding: 10px;
}

button#btn-delete-part-code {
    color: #fff;
    background: #9e0101;
    border-radius: 1px;
    border: 1px solid #9e0101;
}

.headr-logo img {
    padding: 10px;
}

.cards_wrapper {
    font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
    width: 100%;
}

.card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 15px;
    cursor: pointer;
}

.card .card_description {
    border-radius: 5px;
    height: 100px;
    padding: 15px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: border-radius 0.6s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.card .card_description .date,
.card .card_description .title {
    color: #1A1818;
    font-size: 20px;
}

.card .card_description .date {
    margin: 0 80px 0 20px;
}

.card.today .card_description {
    background-color: #fff;
}

.card.tomorrow .card_description {
    background-color: #fff;
}

.card.unfolded .top {
    animation: unfold_top 0.6s ease-in-out;
}

.card.unfolded .bottom {
    animation: unfold_bottom 0.6s ease-in-out;
    padding: 10px 23px;
    border-top: 1px dashed #cccccc;
}

.card.unfolded .card_description {
    border-radius: 5px 5px 0 0;
}

.card.folded .top {
    animation: fold_top 0.6s forwards ease-in-out;
}

.card.folded .bottom {
    animation: fold_bottom 0.6s forwards ease-in-out;
}

.top,
.bottom {
    position: relative;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    /*    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);*/
}

.bottom {
    border-radius: 0 0 5px 5px;
}

.alarm_item {
    /*  display: flex;*/
    align-items: center;
}

.alarm_item .time_block {
    margin-left: 20px;
}

.alarm_item .day_part {
    font-size: 10px;
    margin: 0 25px 0 5px;
    color: #798384;
}

.alarm_item .time {
    padding: 10px;
    border-radius: 3px;
    color: #1A1818;
    background-color: #03a9f4;
}

.alarm_item .alarm_item_description {
    color: #798384;
}

@keyframes fold_top {
    100% {
        transform-origin: top;
        transform: perspective(100px) rotateX(-10deg);
        height: 0;
    }
}

@keyframes fold_bottom {
    100% {
        transform-origin: bottom;
        transform: perspective(100px) rotateX(10deg);
        height: 0;
    }
}

@keyframes unfold_top {
    0% {
        transform-origin: top;
        height: 0;
        transform: perspective(100px) rotateX(-10deg);
    }
    100% {
        transform: perspective(100px) rotateX(0deg);
        height: 80px;
    }
}

@keyframes unfold_bottom {
    0% {
        transform-origin: bottom;
        height: 0;
        transform: perspective(100px) rotateX(10deg);
    }
    100% {
        transform: perspective(100px) rotateX(0deg);
        height: 80px;
    }
}

#firstBehindDisplay {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    padding: 12px 23px;
    display: flex;
    justify-content: space-between;
}

#firstBehindRow {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 7px;
    text-align: left;
}

#detail {
    font-size: 14px;
    color: rgb(69, 69, 69);
    font-weight: bold;
}

#detailLabel {
    color: #686868;
    font-size: 10px;
    font-weight: 100;
}

#secondBehindDisplay {
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    /*    border-bottom: 1px dashed #d1d1d1;*/
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px dashed #cccccc;
}

#price {
    color: #2d2d2d;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    margin-top: -2px;
}

#priceLabel {
    color: #747474;
    font-weight: 100;
    font-size: 10px;
    text-align: left;
}

.table {
    width: 100%;
    float: left;
    text-align: left;
    font-size: 13px;
}

td {
    padding: 5px 10px 0 0;
    vertical-align: baseline;
}

.but-sec {
    width: 100%;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.but-sec a {
    padding: 10px;
    background: #1A1818;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    width: 100%;
    float: left;
    margin-right: 2px;
    text-align: center;
}

.but-sec a:hover {
    background: #e64040;
}

.app h3 {
    font-size: 16px;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
}

.hed-text {
    width: auto;
    max-width: 100%;
   float: right;
    margin-bottom: 20px;
    color: #fff;
    font-size: 14px;
    text-align: right;
    top: 14px;
}

.inr {
    border-radius: 5px;
    background: #fff;
    float: left;
    padding: 15px;
    width: 100%;
}

.inr td {
    padding: 19px 10px 0 0;
}

input[type=text],
select,
textarea {
    width: 90%;
    padding: 5px;
    border: azure;
    border-bottom: 1px solid #ccc !important;
    border-radius: 4px;
    resize: vertical;
    box-shadow: none;
    border: none;
}


/*new css 12 apr 2021*/

#login-wrapper {
    width: 90%;
}

#login-wrapper .card {
    border-radius: 0;
    padding: 30px;
}

#login-form .form-control {
    border: none;
    border-bottom: solid 1px #ccc;
    border-radius: 0;
    font-size: 13px;
    padding-left: 0;
}

#login-form input[type=text],
select,
textarea {
    width: 100%;
    border-radius: 0;
}

#login-wrapper .btn {
    float: left;
    margin-top: 30px;
    background: #1a1818;
    border: 1px #1a1818;
    border-radius: 0;
    font-size: 14px;
    width: 100%;
}

.form-control:focus {
    box-shadow: none;
}



li{
    list-style: none;
}
.hed-text li{
    float: left;
    padding: 10px 0 0 10px;
}
.hed-text li a{
 color: #fff;
    background: #2d2d2d;
    padding: 5px 12px;
    border-radius: 50px;
}
.hed-text li a:hover{
 text-decoration: none;
    background: #000;
}

.btn-create {
    background-color: #000;
    color: #fff;
    padding: 10px;
    border: none;
    font-size: 14px;
    width: 100%;
}


@media only screen and (max-width: 768px) {
    .app {
        width: 100%;
        padding: 0 10px;
    }
  
}


/*new css 12 apr 2021*/