/*
Template Name: Zircos - Bootstrap 4 Admin Dashboard
Author: CoderThemes
Email: support@coderthemes.com
File: Main Style scss
Version : 2.0
*/
/* Google font */
@import url("https://fonts.googleapis.com/css?family=Sarabun:400,500,600");
/************************************
01.General
02.Helper
03.Bootsrap custom
04.Waves
05.Menu
06.Demo only
07.Buttons
08.Cards
09.Portlets
10.Modals
11.Checkbox & Radio
12.Tabs
13.Progressbars
14.Notification
15.alerts
16.Video
17.Popover & Tooltips
18.Badge
19.Pagination
20.Sweetalert2
21.Widgets
22.Nestable
23.Calender
24.Email
25.Form Elements
26.Form Advanced
27.Form Validation
28.Form Picker
29.Form Wizard
30.Form Editor
31.Form upload
32.Tables
33.Table Datatable
34.Table Responsive
35.Table Editable
36.Tablesaw
37.charts
38.Maps
39.Account pages
40.Extas pages
41.Invoice
42.Blog
43.Real Estate
44.Responsive
*************************************/

/* =============
   Checkbox and Radios
============= */
.checkbox label {
  display: inline-block;
  padding-left: 5px;
  position: relative;
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  line-height: 17px;
}

.checkbox label::before {
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid #dadada;
  content: "";
  display: inline-block;
  height: 17px;
  left: 0;
  margin-left: -20px;
  position: absolute;
  transition: 0.3s ease-in-out;
  width: 17px;
  outline: none !important;
}

.checkbox label::after {
  color: #797979;
  display: inline-block;
  font-size: 11px;
  height: 16px;
  left: 0;
  margin-left: -20px;
  padding-left: 3px;
  position: absolute;
  top: 0px;
  width: 16px;
}

.checkbox input[type="checkbox"] {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  outline: none !important;
}

.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65;
}

.checkbox input[type="checkbox"]:focus + label::before {
  outline-offset: -2px;
  outline: none;
}

.checkbox input[type="checkbox"]:checked + label::after {
  content: "\F12C";
  font-family: 'Material Design Icons';
  font-weight: bold;
}

.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}

.checkbox.checkbox-circle label::before {
  border-radius: 50%;
}

.checkbox.checkbox-inline {
  margin-top: 0;
}

.checkbox.checkbox-single label {
  height: 17px;
}

.checkbox.checkbox-single input {
  position: relative;
  bottom: 10px;
}

.checkbox-custom input[type="checkbox"]:checked + label::before {
  background-color: #7fc1fc;
  border-color: #7fc1fc;
}

.checkbox-custom input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #188ae2;
  border-color: #188ae2;
}

.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #f5707a;
  border-color: #f5707a;
}

.checkbox-danger input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-info input[type="checkbox"]:checked + label::before {
  background-color: #3ac9d6;
  border-color: #3ac9d6;
}

.checkbox-info input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before {
  background-color: #f9c851;
  border-color: #f9c851;
}

.checkbox-warning input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-success input[type="checkbox"]:checked + label::before {
  background-color: #4bd396;
  border-color: #4bd396;
}

.checkbox-success input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-purple input[type="checkbox"]:checked + label::before {
  background-color: #6b5fb5;
  border-color: #6b5fb5;
}

.checkbox-purple input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-pink input[type="checkbox"]:checked + label::before {
  background-color: #F06292;
  border-color: #F06292;
}

.checkbox-pink input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.checkbox-inverse input[type="checkbox"]:checked + label::before {
  background-color: #3b3e47;
  border-color: #3b3e47;
}

.checkbox-inverse input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}