@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500&display=swap");

html,
body {
    margin: 20px;
    font-family: "Sarabun", sans-serif;
}

/* ส่วนของหัวข้อแต่ละอก. */
.text-header {
    font-size: 20px;
    /* font-weight: 500; */
    font-family: 'Sarabun', sans-serif;
}
/* ส่วนของหัวข้อแต่ละอก. */


/* ส่วนlabel แต่ละ แบบอก. */
label{
    display: inline-block;
    margin-bottom: 0.5rem;
}
/* ส่วนlabel แต่ละ แบบอก. */

#texthead{
    font-size: 18px;
    font-family: 'Sarabun', sans-serif;
}

/* ส่วนheadของCard */
.header {
    color: #fff;
    background: #db681d;
    height: 50px;
    padding: 10px !important;
}
/* ส่วนheadของCard */



/* Pagination*/

.page-link {
    color: gray !important;
    border: 1px solid lightgray;
}
.page-link:hover {
    background-color: #e59560 !important;
    color: white !important;
}
.page-item.active .page-link {
    color: white !important;
    background-color: #db681d !important;
    border-color: var(--main) !important;
}

/* Pagination */


/* radio */
#radio{
    margin-left:15px;

}
/* radio */


/* แสดงข้อมูลรูปส่วนของอัพโหลดรปภาพ */
.image-preview{
    width: 400px;
    min-height: 100px;
    /* border:2px solid #dddddd; */
    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #cccccc;
}
.image-preview__image{
    display: none;
    height: 85%;
}
/* แสดงข้อมูลรูปส่วนของอัพโหลดรปภาพ */


.topnav-centered a{
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }



  /* floating button */
  .adminActions {
    position: fixed;
    bottom: 20px; right: 25px;
  }

    .adminButton {
      height: 60px;
      width: 60px;
      background-color: #db681d;
      border-radius: 50%;
      display: block;
      color: #fff;
      text-align: center;
      position: relative;
      z-index: 1;
    }

      .adminButton i {
        font-size: 22px;
      }

    .adminButtons {
      position: absolute;
      width: 100%;
      bottom: 120%;
      text-align: center;
    }

      .adminButtons a {
        display: block;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        text-decoration: none;
        margin: 10px auto 0;
        line-height: 1.15;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        position: relative;
        box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
      }
      .adminButtons .btnfloat {
        display: block;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        text-decoration: none;
        margin: 10px auto 0;
        line-height: 1.15;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        position: relative;
        box-shadow: 0 0 0 0 rgba(51, 51, 51, .3);
      }

        .adminButtons a:hover {
          transform: scale(1.05);
        }
        .adminButtons .btnfloat:hover {
          transform: scale(1.05);
        }

        .adminButtons a:nth-child(1) {background-color: gray; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}
        .adminButtons a:nth-child(2) {background-color: #007bff; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
        .adminButtons .btnfloat:nth-child(3) {background-color: #20a2aa; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}
        .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}

        .adminActions a i {
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
        }
        .adminActions .btnfloat i {
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
        }

    .adminToggle {
      -webkit-appearance: none;
      position: absolute;
      border-radius: 50%;
      top: 0; left: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-color: transparent;
      border: none;
      outline: none;
      z-index: 2;
      transition: box-shadow .2s ease-in-out;
      box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
    }

      .adminToggle:hover {
        box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
      }

      .adminToggle:checked ~ .adminButtons a {
        opacity: 1;
        visibility: visible;
      }

      .adminToggle:checked ~ .adminButtons .btnfloat {
        opacity: 1;
        visibility: visible;
      }

  /* floating button */


  /*date timepack  */

  /* .ui-datepicker
  {
      background: #db681d;
      color: #fff;
  } */
    .ui-widget-header {
    background: #f38135;
    color: #fff;
    }

    .ui-widget-content .ui-state-default:hover{
    background: #db681d;
    color: #fff;
    border-radius: 2px;
    }
  /*date timepack  */

  input:focus {
    outline: none;
    box-shadow: 0px 0px 5px #ed7d31 !important;
    border: 1px solid #ed7d31 !important;
}

input:hover {
    border: 1px solid #ed7d31;
    border-radius: 5px;
}

select:focus {
    outline: none;
    box-shadow: 0px 0px 5px #ed7d31 !important;
    border: 1px solid #ed7d31 !important;
}

select:hover {
    border: 1px solid #ed7d31;
    border-radius: 5px;
}

textarea:focus {
    outline: none;
    box-shadow: 0px 0px 5px #ed7d31 !important;
    border: 1px solid #ed7d31 !important;
}

textarea:hover {
    border: 1px solid #ed7d31;
    border-radius: 5px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #ed7d31;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 50% !important;
}



/*
 *  STYLE 2
 */
 .stylescrollbar::-webkit-scrollbar{

    height: 10px;
}
.stylescrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.stylescrollbar::-webkit-scrollbar
{
	background-color: #F5F5F5;
}

.stylescrollbar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #cccccc;
}