@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");




body{
    background:var(--light);
    margin-top:-1px;
}




.gt{margin-top:1px;}
.gb{margin-bottom:1px;}
.gg{border:1px solid lightgray; margin:0; border-radius:0;}
.card, .card-body{  border-radius:0; margin:0; }
.logoo {font-size:32; color:white; text-align:center; padding-bottom:8px;}

        /*input[type=text], input[type=tel] , input[type=number] , .input-group-text{*/
        /*    background: transparent;*/
        /*    border-radius: 0;*/
        /*    border:0;*/
        /*    border-bottom : 1px solid lightgray;*/
        /*}*/
        /*input[type=text]:focus, input[type=tel]:focus, input[type=number]:focus {*/
        /*    border-color:transparent;*/
        /*    background: transparent;*/
        /*    border-radius: 0;*/
        /*    border:0;*/
        /*    font-weight: 600;*/
        /*    color: var(--dark);*/
        /*     border-bottom : 1px solid var(--dark);;*/
        /*    box-shadow: 0px 0px 0px rgba(56, 169, 240, 0.75) !important;*/

        /*}*/
        
        
        
        .sele,  .form-control .input[type=text]:disable {
            width:100%;
            background: var(--light);
            border-radius: 0;
            border:0;
            border-bottom : 1px solid lightgray;
        }
        
        .sele {
            border-color:transparent;
            background: transparent;
            border-radius: 0;
            border:0;
            font-weight: 600;
            color: black;
             border-bottom : 1px solid var(--dark);;
        }
         .sele:focus {
            border-color:transparent;
            background: transparent;
            border-radius: 0;
            border:0;
            font-weight: 600;
            color: var(--dark);
             border-bottom : 1px solid var(--dark);;
            box-shadow: 0px 0px 0px rgba(56, 169, 240, 0.75) !important;

        }
        .pad60 {margin-left:60px;}
        
                  input[type="checkbox"]{-webkit-transform: scale(1.5); margin:0px; }
    
    input[type=checkbox]:checked {
  background-color: var(--darker) !important;
  color: #975478 !important;
  border:0px solid dark(--darker) !important;
}
        
        /*.btn {*/
        /*    border-radius: 0;*/
        /*}*/




    @property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie {
  --p:20;
  --b:5px;
  --c:darkred;
  --w:50px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 11px;
  font-weight: bold;
  font-family: sans-serif;
 background:var(--lighter);border-radius: 50%;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  
}
.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 1s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{--p:0}
}