html, body {
    height: 100%;
    color: black;
    font-family: arial;
}

.appIcon {
    filter: invert(68%) sepia(8%) saturate(1958%) hue-rotate(357deg) brightness(87%) contrast(90%);    height: 16px;
}

.appcontainer{
    display: none;
}

.versionField{
    /* color:chartreuse */
}

.input-group-addon{
    border-style: solid;
    border-color: #CED4DA;
    background-color: #e6e6e6;
    border-width: 1px;
    width: 25px;
    border-top-right-radius: 15%;
    border-bottom-right-radius: 15%;

}

#passwordEye, #refreshArrow{
    margin-top: 10px;
}

.jumbotron {
    background-image: url("src_temiq_logo.jpg");
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
    height: 15%;
    margin-top: 30px!important;
}


.temperature-value{
    font-size: 100px;
}

.temperature-unit{
    font-size: 50px;
}

#weekday::first-letter{
    text-transform:capitalize;
}

.btn-success {
    color: #fff!important;
    background-color: #00e600!important;
    border-color: #00e600!important; /*set the color you want here*/
    border-radius: 12px!important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success {
    color: #fff!important;
    background-color: #00e600!important;
    border-color: #00e600!important; /*set the color you want here*/
}

.btn-error {
    color: #fff!important;
    background-color: red!important;
    border-color: red!important; /*set the color you want here*/
    border-radius: 12px!important;
    animation: buttonBlink 1s linear infinite;
}
.btn-error:hover, .btn-error:focus, .btn-error:active, .btn-error.active, .open>.dropdown-toggle.btn-error {
    color: #fff!important;
    background-color: red!important;
    border-color: red!important; /*set the color you want here*/
    animation: buttonBlink 1s linear infinite;

}

.btn-warning {
    color: #fff!important;
    background-color: #B7945E!important;
    /* border-color: red!important; */
    border-radius: 12px!important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning {
    color: #fff!important;
    background-color: #8f3613!important;
    /* border-color: red!important; */

}

@keyframes buttonBlink {
    50% {
        opacity: 0;
    }
}

object {
    width: 100%; /* for responsiveness */
  }

.card-link {
    color: #B7945E;
}

.card-link:hover {
    color: #F1C522;
}

.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}


.custom-control-input:focus~.custom-control-label::before {
    border-color: #B7945E !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
  }
  
  .custom-control-input:checked~.custom-control-label::before {
    border-color: #B7945E !important;
    background-color: #B7945E !important;
  }
  
  .custom-control-input:active~.custom-control-label::before {
    background-color: #B7945E !important;
    border-color: #B7945E !important;
  }
  
  .custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #B7945E !important;
  }
  
  .custom-control-input-green:not(:disabled):active~.custom-control-label::before {
    background-color: #B7945E !important;
    border-color: #B7945E !important;
  }




  /* Small devices (landscape phones, 544px and up) */
@media (min-width: 0px) {  

}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  


}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    /* .infoButton {font-size:1.17rem;} */

}