@charset "UTF-8";

:root {
  --col-header:    #f5f5f5;
  --col-summe:     #366c00;
  --col-in:        #366b00;
  --col-out:       #292929;
  --col-in-bgr:    #e4eddb;
  --col-li-border: #e3e3e3;
  --col-txt-h1:    #292929;
  --col-txt-h2:    #565656;
  --col-maincat:   #e5e5e5;
  
  
  
  --col-text:   #222222;
  --col-a:      #497c9f;
  --col-blue:   #005073;
  --col-red:    #d83713;
  --col-red2:   #c33f1b;
  --col-grey:   #a0a0a0;
  --col-dis:    #cdccc9;
  --col-lbl:    #969696;
  
  --col-btn-bgr: #005073;
  --col-btn-txt: #ffffff;
  --col-btn-hov: #861623;
  
  --col-bgr:    #fefcf5;
  --col-li:     #fefcf5;
  --col-opt:    #a6d4e2;
  --col-opt:    #00dda7;
  --col-opt:    #3f94a5;
  --width:      375px;
  
  --col-blau1:  #a2c3d7;
  --col-blau2:  #789bb0;
  --col-blau3:  #497c9f;
  --col-blau4:  #1c4668;
  --col-blau5:  #0f243f;
  
  --col-navip:  #f9f7f0;
  --col-navia:  #a2c3d7;
}


body {
  display:              grid;
  min-height:           100vh;
  margin:               0 auto;
  font-family:          'Dancing Script', cursive;
  font-family:          'Oswald', sans-serif;
  font-family:          'Libre Franklin', sans-serif;
  background-color:     white;
  color:                var(--col-txt-h2);
  line-height:          1.5;
  background-image:     url("../pics/bgr.jpg");
  background-size:      cover;
  background-attachment: fixed;
	place-content:        center;
}


main {
  margin-top:           0px;
  width:                100vw;
  min-height:           calc(100vh - 100px);
}

@media(max-width:450px) {
  main {
    max-width:         100%;
  }
}

@media(min-width:450px) {
  main {
    max-width:         1400px;
  }
}

input, select, textarea {
  display:              block;
  width:                calc(100% - 12px);
  height:               auto;
  padding:              5px;
  font-family:          'Libre Franklin', sans-serif;
  font-weight:          400;
  font-size:            13px;
  color:                #5b5b5b;
  background-color:     #fff;
  background-clip:      padding-box;
  border:               1px solid #ced4da;
  border-radius:        .25rem;
  transition:           border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.container {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  align-items:          center;
  justify-content:      center;
  width:                100%;
  height:               auto;
  margin-right:         auto;
  margin-left:          auto;
}

.content {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      center;
  padding:              0px;
  width:                100%;
  //max-width:            var(--width);
  background-color:     white;
  border-radius:        10px 10px 0px 0px;
}



a {
  color:                #5b5b5b;
  text-decoration:      none;
}
a:hover {
  color:                #008ac9;
  text-decoration:      none;
}


ul {
  position:             relative;
  float:                left;
  list-style:           none;
  width:                100%;
  margin:               0px;
  padding:              0px;
}

/***************************************************************************************************************************************************/

/******************************************************/
/* INDEX Header                                       */
/******************************************************/

.index-header {
  position:         fixed;
  background-color: var(--col-header);
  color:            var(--col-txt-h1);
  text-align:       center;
  width:            var(--width);
  font-family:      'franklin-gothic-urw', 'Helvetica', 'Arial', sans-serif;
  font-size:        28px;
  font-weight:      600;
  z-index:          1;
  height:           115px;
}

.index-header-logo {
  position:         relative;
  float:            left;
  width:            95px;
  height:           95px;
  margin:           10px;
}
.index-header-logo img {
  width:            100%;
}
.index-header-content {
  position:         relative;
  float:            left;
  width:            calc(100% - 120px);
  margin-top:       35px;
}


/******************************************************/
/* INDEX Content                                      */
/******************************************************/

.index-content {
  position:      relative;
  float:         left;
  margin-top:    125px;
  width:         100%;
}

.index-li {
  position:             relative;
  float:                left;
  background-color:     white;
  width:                calc(50% - 32px);
  margin:               10px;
  padding:              5px;
  list-style:           none;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
  border-radius:        10px;
  border:               1px solid var(--col-header);
}
.index-content-month, .index-content-month-akt {
  position:             relative;
  float:                left;
  padding:              5px;
  width:                calc(100% - 10px);
  font-size:            20px;
  text-align:           center;
  color:                var(--col-txt-h2);
  font-weight:          500;
}
.index-content-month-akt {
  background-color:     var(--col-in-bgr);
  color:                var(--col-in);
  border-radius:        5px;
}


/******************************************************/
/* MONTH Header                                       */
/******************************************************/

.month-header {
  position:         fixed;
  background-color: var(--col-header);
  color:            var(--col-txt-h1);
  text-align:       center;
  width:            100%;
  font-family:      'franklin-gothic-urw', 'Helvetica', 'Arial', sans-serif;
  font-size:        28px;
  font-weight:      600;
  z-index:          1;
  height:           115px;
}
@media(max-width:450px) {
  .month-header {
    max-width:         100%;
  }
}

@media(min-width:450px) {
  .month-header {
    max-width:         1400px;
  }
}


.month-header-prev, .month-header-next {
  position:      relative;
  float:         left;
  width:         15%;
  margin-top:    30px;
}

.month-header-content {
  position:      relative;
  float:         left;
  width:         70%;
}


.month-header-month {
  position:      relative;
  float:         left;
  width:         100%;
  font-size:     20px;
  text-align:    center;
  font-weight:   400;
}
.month-header-credit {
  position:      relative;
  float:         left;
  width:         100%;
  font-size:     35px;
  text-align:    center;
  color:         var(--col-summe);
  font-weight:   600;
}
.month-header-date {
  position:      relative;
  float:         left;
  width:         100%;
  font-size:     16px;
  text-align:    center;
  font-weight:   300;
}


@media(max-width:450px) {

}




/******************************************************/
/* MONTH Content                                       */
/******************************************************/
.month-content {
  position:      relative;
  float:         left;
  margin-top:    125px;
  width:         100%;
}

@media(min-width:450px) {
  .month-content {
    padding-right: 100px;
    padding-left: 100px;
  }
}

.action-row-date {
  position:             relative;
  float:                left;
  background-color:     white;
  width:                calc(100% - 30px);
  margin-left:          10px;
  padding:              0px;
  margin-top:           20px;
}


.action-li, .action-li-new {
  position:             relative;
  float:                left;
  background-color:     white;
  width:                calc(100% - 30px);
  margin:               10px;
  padding:              5px;
  list-style:           none;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
  border-radius:        10px;
  border:               1px solid var(--col-header);
}
.action-li-new {
  background-color:     var(--col-in-bgr);
}

.action-row-content {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  margin:               5px;
  border-bottom:        1px solid var(--col-dis);
}

.action-maincat {
  position:             relative;
  float:                left;
  width:                50px;
  height:               100px;
}
.action-maincat-img {
  position:             relative;
  float:                left;
  width:                100%;
  border-radius:        25px;
  aspect-ratio:         1 / 1;
  background-color:     var(--col-maincat);
}
.action-maincat img {
  position:             relative;
  float:                left;
  width:                30px;
  height:               auto;
  margin-top:           10px;
  margin-left:          10px;
}

.action-id {
  position:             relative;
  float:                left;
  width:                100%;
  text-align:           center;
  color:                var(--col-dis);
  font-size:            12px;
  font-weight:          300;
  height:               auto;
  margin-top:           10px;
}
.action-button {
  position:             relative;
  float:                left;
  width:                100%;
  text-align:           center;
  height:               auto;
  margin-top:           10px;
}

.action-content {
  position:             relative;
  float:                left;
  width:                calc(100% - 50px);
  height:               auto;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

.action-date {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  margin-left:          10px;
  color:                var(--col-txt-h1);
  font-size:            18px;
  font-weight:          600;
}
.action-value {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  margin-left:          10px;
  color:                var(--col-txt-h1);
  font-size:            18px;
  font-weight:          600;
}
.action-subcat {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  margin-left:          10px;
  color:                var(--col-txt-h2);
  font-size:            16px;
  font-weight:          400;
}
.action-saldo {
  position:             relative;
  float:                left;
  width:                calc(50% - 10px);
  margin-left:          10px;
  color:                var(--col-dis);
  font-size:            14px;
  font-weight:          400;
  margin-top:           3px;
}
.action-amount {
  position:             relative;
  float:                left;
  width:                calc(50% - 10px);
  margin-left:          10px;
  color:                var(--col-txt-h1);
  font-size:            18px;
  font-weight:          600;
  text-align:           right;
}


.action-input-new {
  position:             relative;
  float:                left;
  width:                calc(100% - 10px);
  margin-left:          10px;
  margin-bottom:        5px;
}


input.action-date-new, input.action-value-new, select.action-subcat-new, input.action-amount-new {
  height:               25px;
  font-size:            16px;
}
input.action-value-new {
}
select.action-subcat-new {
  height:               35px;
  width:                100%;
}
input.action-amount-new {
  text-align:           right;
}






.positive {
  background-color:     var(--col-in-bgr);
  color:                var(--col-in);
  border-radius:        20px;
  text-align:           center;
}



.action-button {
  position:      relative;
  float:         left;
  width:         40px;
  text-align:    left;
  margin-left:   5px;
  margin-top:    70px;
}
.action-button button {
  position:         relative;
  float:            left;
  width:            100%;
  margin:           0px;
  aspect-ratio:     1 / 1;
  background-color: var(--col-opt);
  color:            var(--col-btn-txt);
  font-family:      'Bai Jamjuree', sans-serif;
  font-family:      'Dancing Script', cursive;
  font-size:        30px;
  font-weight:      600;
  letter-spacing:   1px;
  text-transform:   uppercase;
  border:           0px;
  cursor:           pointer;
  border-radius:    10px;  
}

.action-button button:hover {
  background-color: var(--col-red2);
}

img.action-row {
  height:           20px;
}

button.action-row-add {
  font-size: 20px;
}





/******************************************************/
/* EDIT Header                                        */
/******************************************************/
.edit-header {
  position:         fixed;
  background-color: var(--col-header);
  color:            var(--col-txt-h1);
  text-align:       center;
  width:            var(--width);
  font-family:      'franklin-gothic-urw', 'Helvetica', 'Arial', sans-serif;
  font-size:        28px;
  font-weight:      600;
  z-index:          1;
  height:           200px;
}
.edit-header-left {
  position:        relative;
  float:           left;
  width:           50px;
  margin-left:     5px;
  margin-right:    10px;
}
.edit-header-prev {
  position:        relative;
  float:           left;
  width:           100%;  
  margin-top:      5px;
}
.edit-header-maincat {
  position:         relative;
  float:            left;
  width:            50px;
  height:           50px;
}
.edit-header-maincat-img {
  position:         relative;
  float:            left;
  width:            100%;
  border-radius:    25px;
  aspect-ratio:     1 / 1;
  background-color: white;
}
.edit-header-maincat-img img {
  position:         relative;
  float:            left;
  width:            30px;
  height:           auto;
  margin-top:       10px;
  margin-left:      10px;
}  
.edit-header-right {
  position:        relative;
  float:           left;
  width:           calc(100% - 65px);
}
.edit-header-details {
  position:       relative;
  float:          left;
  width:          85%;
  font-size:      20px;
  text-align:     center;
  color:          var(--col-txt-h2);
  font-weight:    400;  
  margin-top:     15px;
}
.edit-header-value {
  position:       relative;
  float:          left;
  width:          100%;
  font-size:      24px;
  text-align:     left;
  color:          var(--col-txt-h1);
  font-weight:    600;
  line-height:    normal;
  height:         80px;
  overflow:       hidden;
  text-overflow:  ellipsis;

}
.edit-header-date {
  position:       relative;
  float:          left;
  width:          100%;
  font-size:      14px;
  text-align:     left;
  color:          var(--col-txt-h2);
  font-weight:    400;  
}
.edit-header-amount {
  position:       relative;
  float:          left;
  width:          95%;
  font-size:      24px;
  text-align:     right;
  color:          var(--col-txt-h1);
  font-weight:    600;  
}
.edit-header-amount-pos {
  position:       relative;
  float:          left;
  width:          95%;
  font-size:      24px;
  text-align:     right;
  color:          var(--col-summe);
  color:          var(--col-summe);
  font-weight:    600;  
}


/******************************************************/
/* EDIT Content                                       */
/******************************************************/
.edit-content {
  position:      relative;
  float:         left;
  margin-top:    160px;
  width:         100%;
  height:        calc(100vh - 200px);
}

.edit-content-details {
  position:             relative;
  float:                left;
  background-color:     white;
  width:                calc(100% - 30px);
  margin-left:          10px;
  padding:              0px;
  margin-top:           20px;
}

.edit-li {
  position:             relative;
  float:                left;
  background-color:     white;
  width:                calc(100% - 30px);
  margin:               10px;
  padding:              5px;
  list-style:           none;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
  border-radius:        10px;
  border:               1px solid var(--col-header);
}

.edit-date-cell, .edit-value-cell, .edit-sub-cell, .edit-amount-cell {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  padding:              10px;
  border-bottom:        1px solid var(--col-dis); 
}
.edit-date-lbl, .edit-value-lbl, .edit-sub-lbl, .edit-amount-lbl {
  position:             relative;
  float:                left;
  width:                100%;
  color:                var(--col-lbl);
  font-size:            14px;
  font-weight:          400;
}
.edit-date-txt, .edit-value-txt, .edit-sub-txt, .edit-amount-txt {
  position:             relative;
  float:                left;
  width:                100%;
}
input.edit, select.edit, input.edit-amount {
  position:             relative;
  float:                left;
  border:               none;
  font-size:            18px;
  color:                var(--col-txt-h1);
  text-align:           left;
  background-color:     var(--col-header);
  height:               30px;
}
input.edit-amount {
  text-align:           right;
}
select.edit {
  width:                100%;
  height:               40px;
}

.edit-button {
  position:      relative;
  float:         left;
  width:         100%;
  text-align:    center;
  //margin-left:   5px;
  margin-top:    10px;
  margin-bottom: 10px;
  height: 		 30px;	
}
.edit-button button {
  position:         relative;
  float:            left;
  width:            100%;
  margin:           0px;
  background-color: var(--col-opt);
  color:            var(--col-btn-txt);
  font-family:      'Oswald', sans-serif;
//font-family:      'Bai Jamjuree', sans-serif;
  font-size:        20px;
  font-weight:      500;
  letter-spacing:   1px;
  text-transform:   uppercase;
  border:           0px;
  cursor:           pointer;
  border-radius:    10px;  
}

.edit-button button:hover {
  background-color: var(--col-red2);
}




.red {
  color:                var(--col-red);
}
.bold {
  font-weight:          bolder;
}