@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@700&display=swap');

.mainContainer{
  margin-left: 1rem;
  margin-right: 1rem;
} 

.navbar .display-2{
   font-family: 'Ubuntu Condensed', sans-serif;
}

ul .btn,
form .btn
{
   font-family: 'Montserrat', sans-serif;
   font-size: 0.85rem;
}

.nav-link{
   font-family: 'Montserrat', sans-serif;
   font-size: 0.85rem;
}

@media screen and (min-width: 760px) {
   .nav-link:hover {
   border-bottom: 2px solid rgb(37, 37, 37);
   padding-bottom: 0.3rem;
   }
}

@media screen and (max-width: 760px) {
   .nav-link:hover {
     opacity: 0.75;
   }
}


#main h1{
   font-family: 'Encode Sans', sans-serif;
   margin-bottom: 2rem;
}

#tables h1{
   margin-bottom: 1rem;
}


.dupa a{
   font-family: 'Encode Sans', sans-serif;
}

ul.text-start{
   padding-left: 0;
}


#main li{
   display: inline-block;
   padding-top: 0;
   padding-bottom: 0;
   font-size: 1.5rem;
   text-decoration: none;
   letter-spacing: 0.5px;
   margin-bottom: 0.4rem;
}

@media screen and (max-width: 600px) {
   #main li span {
     font-size: 1.05rem;
     letter-spacing: 0;
     left: 3px;
   }
 }

 @media screen and (min-width:601px) and (max-width: 990px) {
   #main li span {
     font-size: 1.25rem;
     letter-spacing: 0;
     left: 3px;
   }
 }

li span{
   position: relative;
   left: 10px;
}

i{
   font-style: normal;
}

.icon-cog {
   position: relative;
}
 
label{
   color: rgb(128, 128, 128);
   font-family: 'Montserrat', sans-serif;
   font-size: 1rem;
} 

.rotate{
   transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  display: block;
  margin-right: 0;
  margin-left: 0; 
}

.rotate:hover{
   transition: 0.7s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate{
   position: relative;
   top: 0.3rem;
}

.dupa a{
   text-decoration: none;
   opacity: 0.95;
}

.dupa a:hover{
   opacity: 1;
}


.selectPeriod {
   display: none;
}

#addExpenseParagraph{
   color: rgb(85, 144, 85);
   display: none;
}

.alert-info{
   color: #ebbb3a;
   background-color: #ffffff;
}

.alert-success{
   color: #87BB48;
   background-color: #ffffff;
}

.alert-warning{
   color:rgb(216, 83, 66);
   background-color: #ffffff;
}

.container {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 1.25rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 /* Hide the browser's default checkbox */
 .container input {
   
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }
 
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
   border-radius: 4px;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
 }
 
 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmark {
   background-color: rgb(180, 216, 122);
 }
 
 /* When the checkbox is checked, add a blue background */
 .container input:checked ~ .checkmark {
   background-color: #B0D880;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
 /* Show the checkmark when checked */
 .container input:checked ~ .checkmark:after {
   display: block;
 }
 
 /* Style the checkmark/indicator */
 .container .checkmark:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 #detailedBalanceIcon{
    cursor: pointer;
 }

 .showDetailedBalance{
    border: none;
 }

 .icon-th-list{
    color:#ebbb3a;
 }

 .label-edit{
    color: black;
 }

 .modal-delete-descrition{
    color:crimson;
    font-size:medium;
    font-weight: bold;
 }

 .limit-descrition{
   color: dimgray;
   font-weight: 500;
 }

 #limitAmount{
   display: none;
 }

 select:focus{
   outline:0;
   box-shadow:none !important;
  }

  .form-check-input:checked {
   background-color: rgb(93, 221, 93);
   border-color: rgb(244, 239, 239);
}

.text-green{
   color: rgb(50, 136, 50);
}

input[type="number"][disabled] {
   color: rgb(183, 183, 183);
}

.btn {
   font-weight: 500;
}

.editButton{
   font-weight: 400;
   font-size:medium;
}