/*button color*/
a.bg-darkb-btn {background-color: #05386B; color:white; border:1px solid #379683;}
a.bg-darkb-btn:hover {background-color: #07529c; color:white; border:1px solid white;}

.bg-teal-btn {background-color: #379683; color:white;}
.bg-teal-btn:hover {background-color: #318775; color:white;}

.bg-tan-btn {background-color: #EDF5E1;}
.bg-tan-btn:hover {background-color: #BEC4B4;}

.bg-red-btn {background-color: #F47174; color:black;}
.bg-red-btn:hover {background-color: #f79b9d;} 

.bg-yellow-btn {background-color: #fff44f; color:black;}
.bg-yellow-btn:hover {background-color: #f79b9d;}

/*text highlighting - used for weather feels*/
.bg-cold {background-color:#87CEFA}
.bg-cool {background-color:#ADD8E6}
.bg-mid {background-color:#FFFFE0}
.bg-warm {background-color:#FFE4B5}
.bg-hot {background-color:#F4A460}
.bg-vhot {background-color:#CD853F}

/*header color*/
h4.green {color:#379683;}

/*logo text*/
.logo-text {font-family: Futura,Trebuchet MS,Arial,sans-serif; font-size:24px; color:white}

/*for nav menu colors and hover*/
a.nav1 {color: #282828; margin:15px;}
a.nav1:hover {color: white; text-decoration: none;}

/*span text lighter gray*/
span.soft-gray {color:#999999; font-family: 'Roboto', sans-serif; font-weight: 300; font-size:1rem}

/*darken image for text to be readable on top*/
div.card-overlay-blk {background: rgba(0, 0, 0, 0.5);}

/*Save, Update, Confirm Button*/
button.btn-save, input.btn-save[type=button], input.btn-save[type=submit], input.btn-save[type=reset] {
   background-color: #379683; color:white; }

/*Change Status Buttons*/
button.btn-active-outline {color:#379683; background-color:white; border:1px solid #379683;}

/*Heading for Swing Elements colors*/
/*h1,h2,h3,h4 {}*/

/*Links for the site to navy blue*/
a {color:black;}

/*Card Title Large Text*/
p.card-lg-txt {font-size:30px;}

/*login page styling*/
body.login-bg {background-color: #031f3a;}
label.login-lbl {color: white;}

div.login-st {
border: 1px solid white; 
padding:50px; 
margin:50px 20px 0px 20px; 
border-radius: 10px; 
background-color: #05386B;
}

a.link-blue{color:navy;}

span.bold-success {color:#379683; font-weight:bold;}

/*Pointer cursor for clickable tr (rows)*/
tr[data-href] {cursor:pointer;}

/*Pointer cursor for clickable divs*/
div.div-clickable {cursor:pointer;}

/*align table data text to right*/
td.right-txt {text-align:right;}

/* for switch toggle checkbox */
.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}

.switch input { 
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}

input:checked + .slider {
 background-color: #379683;
}

input:focus + .slider {
 box-shadow: 0 0 1px #379683;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}


/* CUSTOM CHECKMARKS */
/* The customcheck */
.customcheck {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Hide the browser's default checkbox */
.customcheck input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: white (142, 13, 13);
   border: 1px solid gray;
   border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
   background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
   /* background-color: #198754; */
   background-color: gray;
   border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
   display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
   left: 7px;
   top: 2px;
   width: 8px;
   height: 16px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}