@font-face{font-family: 'my-square721'; src:url(./../../assets/font/Square-721.ttf)}

@font-face{font-family: 'myPop'; src:url(./../../assets/font/pp.ttf)}

* {margin: 0; padding:0; box-sizing: border-box; font-family: 'myPop'; list-style: none;}

#title {display: block-inline; margin-left: auto; margin-right: auto;}

.container {min-height: 80vh;}

header {background: linear-gradient(steelblue, #dddddd);}

.header-caption {font-size: 1.1em; font-weight: bold; text-align:center; color: darkgreen; text-decoration: underline;}

footer {background: linear-gradient(#dddddd, steelblue); padding-top: 15px; padding-bottom: 15px; font-size: .9em;}

.title-link {color:white;}

.title-link:hover {color:white;}

.form-background {background: linear-gradient(0.5turn, #eee, #fff, #f1e4d8);}

.fas, .far, .fab {margin-right: 5px;}

.p-20 {padding: 20px;}

.p-40 {padding: 40px;}

.pt-20 {padding-top: 20px}

.pt-30 {padding-top: 30px}

.pt-40 {padding-top: 40px;}

.pt-60 {padding-top: 60px;}

.pb-20 {padding-bottom: 20px}

.pb-40 {padding-bottom: 40px}

.m-20 {margin: 20px;}

.m-40 {margin: 40px;}

.mt-20 {margin-top: 20px;}

.mt-40 {margin-top: 40px;}

.mt-60 {margin-top: 60px;}

.mb-20 {margin-bottom: 20px}

.mb-40 {margin-bottom: 40px}

.mb-60 {margin-bottom: 60px}

.shadow-text {text-shadow: 1px 1px #bbb;}
 
.shadow-box {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.19);}

.fixed-site-navigation{z-index:170; margin:0 auto; width:100%; position:fixed; top:0; left:0; right:0;}
 
.bg-gradient {background: linear-gradient(steelblue, silver);} 

.login-frame ul {box-sizing: border-box;}

.login-frame ul li {margin-left: 50px; list-style: url(./../../assets/img/icons/check-2x.png);  filter: invert(50%); -webkit-filter: invert(50%);color: #888; font-size: 1.1em;}

.toggle-modal {display: block;}

.menu-accordion {height: 400px; display: block;}

.transparent-div {display: block; background: black; color: black; border: 1px; width: 100%; height: 40px;}

.menus ul {margin-bottom: 15px;}

.menus ul li {color:#994422; list-style:url(./../../assets/img/icons/check.png); padding: 5px 10px; border-bottom: 1px solid #999999; background: transparent;}

.menus ul li:hover {border:1px solid white; background: linear-gradient(gray, #ddd)}

.menus ul li a{color:#994422; text-decoration:none; font-weight: 700; font-size:0.9em;}

.menus ul li a:hover {color: #123456;}

.menus ul .active-link a{color: navy;}

.menus ul .active-link {background-color: steelblue; border-radius: 2px; border: 2px solid #ddd; font-size: 1.1em; text-decoration: underline;}

.legend-set {
  font-size: 1em; 
  font-weight: bold; 
  display: block; 
  width: auto; 
  margin-left: 5px; 
  margin-right: 5px; 
  color: #123456;
}

form label{font-size: 0.9em; color: #123456;}

label{font-size: 0.9em; color: #123456;}

input[type=checkbox]~label {
  color: #444444 !important;
}

@media screen and (max-width: 800px) {
  #svgImage {
      display: none;
  }
}

.bg-gainsboro{background: gainsboro;}

.custom-table-head-2{background: linear-gradient(#28a745, #28a654, #2dc450, #228b3a); color: #241e1e; font-size: 0.9em; font-weight: lighter;}

/* .custom-table-head{background: linear-gradient(rgb(123, 236, 123), silver); color: black; font-size: 0.9em;} */
.icofont {
  margin: 0 3px 0 0;
}

.shadow-x {
  border: none;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.15);

}

.color-box {
  display: flex;
  width: 40px;
  height: 25px;
  margin: 5px 10px;
  border: 4px solid rgba(120, 120, 120, 0.3);

}

.green {
  background-color: palegreen;
  
}

.red {
  background-color: darksalmon;
}

.bg-modal {
  background-color: #9cbec4;
  color: #bbb;
   color: lightgreen
}

.custom-table-head {
  background: linear-gradient(white, whitesmoke, gainsboro);
   
}

table, table + td {font-size:0.9em;}

/* .custom-control-label {color: #17a2b8;} */

.custom-control-input:checked~.custom-control-label::after{background-image: url(./../../assets/img/icons/check.png); filter: invert(100%); -webkit-filter: invert(100%);}          
          
.float-left-right{display: flex; justify-content: space-between; align-items: center;}

.cls {
    border-bottom-left-radius: 0;
    border-top-left-radius:0;
}

.custom-radio label {
    color: #888888;
}

.custom-radio label:hover {
    color: #2e0de4;
}

.colorm {
    color: #9cbec4;
}

fieldset {
    border-radius: 3px;
    /* border: 2px solid #ddd !important;
    padding-left: 25px !important;
    padding-right: 25px !important;     */
    min-height: 80px !important;

}

.new-legend {
  display: inline-block;
  padding: 1px 8px;
  background: #d9e387;
  color: black;
  font-weight: 500;
  font-size: .95em;
  border: 1px solid #aaf;
}

/*--------------------------------------------------------------
# 404 - Not found
--------------------------------------------------------------*/
#body-container h1{
    font-size: 180px;
    display: block;
    color: #17a2b8;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    margin-top: 70px;
}
  
  #body-container h4{
    font-size: 40px;
    display: block;
    color: #17a2b8;
    font-weight: bold;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
  }
  
  #body-container img {
    width: 100px;
    margin-top: -72px;
    z-index: 0;
  }
  
  #body-container p {
    font-size: 1.6rem;
    color: #555555;
    margin: 40px 0;
    text-align: center;
  }
  
  #body-container p > a, #body-container p > button {
    color: #17a2b8;
    background: none;
    padding: 0;
    font-size: 1.6rem;
    text-decoration: underline;
    border: none;
  }
  
  #body-container p ~ a {
    display: inline-block;
    background: #207072cd;
    color: #fafafa;
    padding: 12px 25px;
    font-size: 1.2rem;  
    font-weight: 500;
    text-decoration: none;  
  
  }
  
  #body-container p ~ a:hover {
    background: #fafafa;
    color: #2a7072;
    border: 1.5px solid #2a7072;
  }
  
  @media screen and (max-width: 756px) {
    #body-container p, #body-container p > a, #body-container p > button  {
        font-size: 1.2rem;
    }
  
    #body-container p {
        margin-left: 25px;
        margin-right: 25px;
    }
  
    #body-container h1 {
        font-size: 160px;
    }
  
    #body-container h4 {
        font-size: 35px;
    }
  
    #body-container a {
      font-size: 1rem;
    }
  
  }
  
/*****************************
  My Custom Checkbox
  
******************************/

input[type=checkbox] {
  position: relative;
  appearance: none;
  outline: none;
  width: 28px;
  height: 12px;
  border-radius: 15px;
  background-color: gainsboro;
  box-shadow: inset 0 0 2px rgba(0,0,0,20%);        
  margin-right: 5px;
  transition: 0.4s ease-in-out;
}

input[type=checkbox]::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(white, whitesmoke, rgb(204, 203, 203));
  left: -2px;
  top: -4px;
  transition: 0.4s ease-in-out;
}

input[type=checkbox]:checked {
  /* background-color: #007bffaa; */
  background-color: #28a745;
  box-shadow: 0 0 7px #28a745bc;
}

input[type=checkbox]:checked::before {
  left: 12px;
  
}

.money-label {
  display: inline-block;
  text-align: right;  
  font-weight: 600;
  color: #666;
  border: 1px solid #aaa;
  border-radius: 0;
  padding: 5px 20px 3px;
  background: gainsboro;
}

.justify-then-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;

}