html, body {
  height: 100%;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
 /* background-color: #faf4f4c9;*/
}
.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.sidebar-navegation {
  box-shadow: 1px 0 20px rgba(0.08, 0.08, 0.08, 0.08);
}
@media (min-width: 1000px) {
  .sidebar-left {
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
  }
}
@media (min-width: 1000px) {
  .sidebar-left {
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
    height: 100%;
  }
}
/* Nav menu */
.sidebar-left .nav-item .nav-link {
  font-weight: 500;
  color: #6e6e6e;
  margin-left: 5px;
  font-size: 14px;
  text-transform: uppercase;
}

.main-color {
  background: linear-gradient(to left,#f58d17, #d60544);
}
 .sidebar-left .nav-item .nav-link:hover {
   background-image: linear-gradient(to left,#e00e56, #f68d21);
   color: #ffffff;
   margin-left: 5px;
   margin-right: -6%;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
 }

 .active, .sidebar-left .nav-link:hover {
    background-image: linear-gradient(to left,#e00e56, #f68d21);
    color: white;
    margin-left: 5px;
    margin-right: -6%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;

  }

.sidebar-left .nav-link:focus {
      color: white;
      background-image: linear-gradient(to left,#f58d17, #d60544);
      margin-left: 5px;
      margin-right: -6%;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
}

.navbar-light .navbar-nav .nav-link.active{
    color: white;

}

/*h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}*/

.text-uper{
  text-transform: uppercase;
}

.fw-4 {
  font-weight: 400;
}
.fw-5 {
  font-weight: 500;
}
.fw-6 {
  font-weight: 600;
}
.fw-7 {
  font-weight: 700;
}
.font-12 {
  font-size: 12px;
}
.font-14 {
  font-size: 14px;
}
.font-16 {
  font-size: 16px;
}
.font-18 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-22 {
  font-size: 22px;
}
.font-24 {
  font-size: 24px;
}

.co-org{
  color: #f88f00;
}
.co-green{
  color: #95c11f ;
}
.co-blue{
  color: #0093be;
}
.co-red{
  color: #d40a36;
}
.co-gray{
  color: #8b8b8b;
}
.co-white{
  color: #d6d6d6e1;
}
.circle-point{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border-color: #000000;
}

.sidebar-heading {
  font-size: 14px;
  font-weight: 400;
  color: #6e6e6e;
}
.sidebar-heading .text-sidebar{
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #6e6e6e;

}
.sidebar-heading-text {
  font-size: 11px;
  text-transform: uppercase;
  /*font-weight: 550;*/
  color: #69686e;
}

/* form input date */
.form-date {
  position: relative;
  background: linear-gradient(to left,#f58d17, #d60544);
  padding: 3px;
  border-radius: 3px;
}
.module {
  background: white;
  color: white;
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

main.body-panal{
  height: 100%;
}
.shadow-sm{
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.card{
  background-color: #fff;
  height: fit-content;
}

.border-ra .language{
  border-radius: 50px;
  color: #fff;
  padding: 2px;
  width: 50px;
}
.border-ra .btn-ex{
  border-radius: 50px;
  color: #fff;
  padding: 5px;
  width: 100px;
  font-size: 12px;
}
.border-ra .btn-green{
  border-radius: 50px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #84c922;
  border-color: #84c922;
  color: #fff;
  width: 100px;
  font-size: 12px;
}
.border-ra .btn-greens{
  border-radius: 50px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #8eca51;
  border-color: #8eca51;
  color: #fff;
  width: 100px;
  font-size: 12px;
}
.border-ra .btn-org{
  border-radius: 50px;
  background-color: #f88f00;
  border-color: #f88f00;
  color: #fff;
  font-size: 12px;
}
.border-ra .btn-white{
  border-radius: 50px;
  background-color: #fff;
  border-color: #999999;
  color: #999999;
  font-size: 12px;
}
.border-ra .btn-org:hover{
  border-radius: 50px;
  background-color: #ffc926;
  border-color: #f5b800;
  color: #fff;
  font-size: 12px;
}
.border-ra .btn-login{
  background: linear-gradient(to left,#df006e, #f28c00);
  /*border-color: none;*/
  color: #fff;
  font-size: 15px;
}
.border-ra .btn-login:hover{
  background: linear-gradient(to left,#df006e, #f28c00);
  background-color: #d60544;
 /* border-color: none;*/
  color: #fff;
  font-size: 15px;
}

.text-span-control {
  margin-bottom: -5px;
  font-size: 14px;
  color: #999999;
}
.text-span {
  font-size: 14px;
}
.text-header{
  font-size: 40px;
  padding: 20px;
  color: #b9b9b9;
}
.sr-input-func {
  position: relative;
  margin: 0;
  right: 0px;
  transition: .5s ease-out;
  border:20px;
}
.sr-input-func i {
  position: absolute;
  top: 12px;
  right: 9px;
  color: #999;
  transition: .5s ease-out;
  font-size:14px;
}

/* table */
.text-header-table {
  background-color: #ffffff;
}
.header-table-main {
 /* background-color: #95c11f;*/
  color: #fff;
  height: 50px;
  margin-bottom: -10px;
}
.header-table{
  background-color: #f28c00;
  color: #fff;
  height: 50px;
  margin-bottom: -10px;
}
.tab-header-table {
  background-color: #292929;
  color: #fff;
  font-size: 12px;
  height: 30px;
}
.tab-footer-table {
  background-color: #747373;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  height: 45px;
  margin-bottom: 20px;
}
.text-table {
  color: #3a3a3a;
}

@media (min-width: 1000px) {
  .page-login{
    padding: 0;

  }
  .page-left{
    padding-left: 250px;
  }
  .page-right{
    background: linear-gradient(to left,#95c11f, #0093be);
  }
  .page-right .panal{
    padding: 80px;
  }
  .page-bottom .panal{
    padding: 75px;
    padding-left: 100px;
    padding-right: 100px;
  }

}

.file-upload {
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 10px;
  border-color: #353535;
  text-align: center;

}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  height: 300px;
  background: #c5c5c58a;
  border-radius: 10px;
  position: relative;
  border-color: #999999;
  text-align: justify;
  justify-content: center;
}

.image-dropping,
.image-upload-wrap:hover {
  height: 300px;
  background: #c5c5c58a;
  border-radius: 10px;
}

.file-upload-image {
  max-height: 300px;
  height: 300px;
  max-width: 100%;
  margin: auto;

}
.file-upload-content {
  display: none;
  text-align: center;
  background: #ffffff;
  width: 100%;
  border-radius: 10px;
  border-color: #999999;
}

/* CheckBox */

.container {
  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 */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 38px;
  width: 40px;
  background-color: #eee;
  border-radius: 3px;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color:#8eca51;
}

/* 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: 16px;
  top: 12px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


 /*Bg*/
.w-150 {
    width: 150%!important;
}

 .w-130 {
     width: 145%!important;
 }
.w-110 {
    width: 110%!important;
}
 .w-100 {
      width: 100%!important;
  }
 /*button*/
 .btn-warning:hover {
     background-color: #f28c00;
     border-color: #f28c00;
 }

 .btn-warning {
     background-color: #f28c00;
     border-color: #f28c00;
 }

 .btn-secondary:hover {
     background-color: #747372;
     border-color: #747372;
 }

 .btn-secondary {
     background-color: #747373;
     border-color: #747373;
 }
 /* Icon eye Password*/
 .field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 10px;
  position: relative;
  z-index: 2;
 }

/* Icon bell login*/
 .field-bell {
   float: left;
   margin-left: 10px;
   margin-top: 28px;
   margin-right: 10px;
   position: relative;
   z-index: 2;
  }

 .field-text {
 padding-left: 120px;
 padding-top: 15px;
 }

 .title {
  padding-left: 120px;
  padding-top: 5px;
  font-size: 20px;
  color: #0093be;
  }

  .detail{
   padding-left: 120px;
   padding-top: 5px;
   padding-bottom: -10px;
   }

   .pb-4, .py-4 {
       padding-bottom: 0px;
   }

   .group-left {
      float: left;
      padding-top: 25vh;
      position: fixed;
      z-index: 0;
      width: 32%;
     }

   .group-right{
      float: right;
      padding-top: -5vh;
      position: absolute;
      z-index: 1;
      width:58vh;
      padding-left: 200px;
   }


/*---Modal--*/
   .field-announcement {
      z-index: -2;
     }

   .modals-contents{
   width: 688px;
   height: 500px;
   background-color: #ffffff;
   }

   button:hover {
     opacity: 0.8;
   }

   .imgcontainers {
     text-align: center;
     margin: 24px 0 12px 0;
     position: relative;
   }


   .containers {
     padding: 16px;
   }

   span.psw {
     float: right;
     padding-top: 16px;
   }


   .modals {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.4);
     padding-top: 60px;
   }

   .modals-contents {
     background-color: #fefefe;
     margin: 5% auto 15% auto;
     border: 1px solid #888;
     width: 670px;
     height: 500px;
     border-radius: 5px;
   }

   .modals-contented {
     background-color: #fefefe;
     margin: 5% auto 15% auto;
     border: 1px solid #888;
     width: 670px;
     height: 350px;
     border-radius: 5px;
   }

   .close {
     position: absolute;
     right: 25px;
     top: 0;
     color: #000;
     font-size: 35px;
     font-weight: bold;
   }

   .close:hover,
   .close:focus {
     color: red;
     cursor: pointer;
   }

    .modal-lg {
    max-width: 30%;
    }
    .modal-lgs {
    max-width: 35%;
    }

/* Radio Color */

    .button {
      display: inline-block;
      position: relative;
      width: 0px;
      height: 10px;
      margin: 10px;
      cursor: pointer;
    }

    .button span {
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      padding: 0;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-radius: 100%;
      background: #eeeeee;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      transition: ease .3s;
    }

    .button span:hover {
      padding: 15px;
    }

    .orange .button span {
      background: #FF5722;
    }

    .amber .button span {
      background: #FFC107;
    }

    .lime .button span {
      background: #8BC34A;
    }

    .teal .button span {
      background: #009688;
    }

    .blue .button span {
      background: #2196F3;
    }

    .indigo .button span {
      background: #3F51B5;
    }

    .layer {
      display: block;
      position: absolute;
      width: 10px;
      height: 10px;
      top: 5px;
      left: 10%;
      border-radius: 100%;
      background: transparent;
      /*transition: ease .3s;*/
      z-index: 0;
    }

    .orange input:checked ~ .layer {
      background: #F4511E;
    }

    .amber input:checked ~ .layer {
      background: #FFB300;
    }

    .lime input:checked ~ .layer {
      background: #7CB342;
    }

    .teal input:checked ~ .layer {
      background: #00897B;
    }

    .blue input:checked ~ .layer {
      background: #1E88E5;
    }

    .indigo input:checked ~ .layer {
      background: #3949AB;
    }


/* End Radio Color */

/* Scroll bar  */
    ::-webkit-scrollbar {
      width: 10px;

    }

    ::-webkit-scrollbar-track {
      background: #d6d6d6;
    }

    ::-webkit-scrollbar-thumb {
      background: #e6e6e6;
      border-radius: 40px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #a9a9a9;
    }
/* End Scroll bar */

/* login Announcement */
    .row1 {
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -30px;
    }
/* Active bar */

    /*#topheader .navbar-nav li > a {
        text-transform: capitalize;
        color: #333;
        transition: background-color .2s, color .2s;

        &:hover,
        &:focus {
            background-color: #333;
            color: #fff;
        }
    }

    #topheader .navbar-nav li.active > a {
        background-color: #333;
        color: #fff;
    }*/