/* ==========================================================================
   #FONT   title
   ========================================================================== */
.font-robo {
  font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}

.font-poppins {
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   #GRID
   ========================================================================== */
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row-space {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.row-spacetes {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  background: crimson;
}

.col-2 {
  width: -webkit-calc((100% - 30px) / 2);
  width: -moz-calc((100% - 30px) / 2);
  width: calc((100% - 30px) / 2);
  /*background-color: aqua;*/
}


.col-2b {
    width: -webkit-calc((100% - 30px) / 2);
    width: -moz-calc((100% - 30px) / 2);
    width: calc((100% - 5px) / 2);
    /*background-color: aqua;*/
}

.col-2c {
    width: 100%;
}

.col-3 {
  width: -webkit-calc((100% - 20px) / 2);
  width: -moz-calc((100% - 20px) / 2);
  width: calc((100% - 30px) / 2);
}

@media (max-width: 920px) {
  .col-2 {
    width: 100%;
  }
}


@media (max-width: 420px) {
  .col-2b {
      width: 100%;
  }
}

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}


/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
 html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 * {
   padding: 0;
   margin: 0;
 }

 *, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
 }

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0;
}

button {
  outline: none;
  background: none;
  border: none;
}

/* ==========================================================================
   #PAGE WRAPPER
   ========================================================================== */
.page-wrapper {
		width: 100%;
}

body {
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  overflow-x:hidden;

}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
  font-weight: 600;
  color: #fc2c77;
}

h3 {
  font-size: 24px;
  font-weight: 400;
  color: teal;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

h6 {
  font-size: 12px;
  font-weight: 500;
}

/* ==========================================================================
   #BACKGROUND
   ========================================================================== */
.bg-blue {
  background: #2c6ed5;
}

.bg-red {
  background: #fa4251;
}

.bg-gra-01 {
  background: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a18cd1));
  background: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
  background: -moz-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
  background: -o-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
  background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%);
}

.bg-gra-02 {
  /* background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079));
  background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%); */
  background: #fc00ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fc00ff, #00dbde); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #ffffff, #ffffff);
}

.bg-gra-03 {
  /* background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079));
  background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
  background: linear-gradient(to top right, /*#067304*/ #b4d209 0%, #0ee80b 100%); */
  background: #4cb8c4; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4cb8c4, #3cd3ad); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4cb8c4, #3cd3ad);
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
.p-t-100 {
  padding-top: 100px;
}

.p-t-130 {
  padding-top: 130px;
}

.p-t-180 {
  padding-top: 180px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-15a {
  /*display: block;*/
  padding-top: 15px;
  /*
  margin-right: 2px;
  margin-left: auto;*/
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-b-100 {
  padding-bottom: 100px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-all {
  padding-bottom: 5px;
}

.m-r-a {
  margin-right: 0;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
.wrapper {
  display: flex;
  padding: 2px 10%;
}

/* ==========================================================================
   #BUTTON
   ========================================================================== */
.btn {
  line-height: 50px;
  padding: 0 30px;
  margin-right: 0px;
  margin-bottom: 25px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  cursor: pointer;
  font-size: 18px;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
  color: black;
}

.btn:active {
  box-shadow:  -4px 4px 4px grey;
  transform: translate(4px, 2px);
  transition: 100ms;
}

.btn--radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn--radius-2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 10px;
}

.btn--pill {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.btn--green {
  background: #57b846;
}

.btn--green:hover {
  background: #4dae3c;
}

.btn--def {
  /*background: #fc2c77;*/
  background: linear-gradient(to top right, /*#067304*/ #d4f900 0%, #0ee80b 100%);
  box-shadow: -8px 9px 10px grey;
  font-size: 15px;
  font-weight: 600;
/*
  font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
  padding: 10px
  */
}

.btn--def:hover {
  /*background: #04fb00;*/
  background: #fc00ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #fc00ff, #00dbde); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #fc00ff, #00dbde);
  color: #fff;
}

/* ==========================================================================
   #DATE PICKER
   ========================================================================== */
td.active {
  background-color: #2c6ed5;
}

input[type="date" i] {
  padding: 5px;
}

.table-condensed td, .table-condensed th {
  font-size: 14px;
  font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 400;
}

.daterangepicker td {
  width: 40px;
  height: 30px;
}

.daterangepicker {
  border: none;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  display: none;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
}

.daterangepicker::after, .daterangepicker::before {
  display: none;
}

.daterangepicker thead tr th {
  padding: 10px 0;
}

.daterangepicker .table-condensed th select {
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 14px;
  padding: 5px;
  outline: none;
}

/* ==========================================================================
   #FORM
   ========================================================================== */
form {margin-bottom: 12px;}

input {
  outline: none;
  margin: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: calc(100% - 45px);
  height: 35px;
  font-size: 14px;
  font-family: inherit;
}

.input--style-4a {
  line-height: 50px;
  border-bottom: 1px solid #0b3db3;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 50px;
  padding: 0 20px;
  font-size: 16px;
  color: rgba(0,0,0,1);
  font-weight: 600;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.input--style-4a::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #b6b6b6;
  font-size: 12px;
}

.input--style-4b {
  line-height: 50px;
  border-bottom: 1px solid #7379b9;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 50px;
  padding: 0 20px;
  font-size: 16px;
  color: #666;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.input--style-4b::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #b6b6b6;
  font-size: 10px;
  font-style: italic;
}

.input--style-4 {
  line-height: 50px;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 25px;
  padding: 0 20px;
  font-size: 16px;
  color: #8400ff;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.input--style-4::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #b6b6b6;
  font-size: 12px;
}

.input--style-4:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #b6b6b6;
  opacity: 1;
}

.input--style-4::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #b6b6b6;
  opacity: 1;
}

.input--style-4:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b6b6b6;
}

.input--style-4:-ms-input-placeholder {
  /* Microsoft Edge */
  color: #b6b6b6;
}

/*
.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-container input:checked ~ .checkmark {
  background-color: #e5e5e5;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #57b846;
}

.checkmark {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #e5e5e5;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
*/
.input-group {
  position: relative;
  margin-bottom: 10px;
  font-weight: 500;
}

.input-group2 {
  position: relative;
  margin-bottom: 10px;
  margin-left: 15px;
}

.input-group-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  font-size: 18px;
  color: #999;
  right: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

/* ==========================================================================
garis
========================================================================== */
.gs0 { /* space deviden */
  padding: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: 0px solid #cccccc;
}
.gs1 {
  padding: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: 2px solid  #ffffff;
}
.gs1b {
  padding: 2px;
  margin-top: 15px;
  margin-bottom: 5px;
  border-bottom: 2px solid  #0fb13d;
}
.gs2 {
  padding: 2px;
  margin-top: 10px;
  margin-bottom: 1px;
  border-bottom: 1px solid #cccccc;
}
.gs5 {
  padding: 5px;
  border-bottom: 1px solid #cccccc;
}
/* ==========================================================================
   Block radio
   ========================================================================== */
   .inGrp {
     background-color: #fafafa;
     opacity: 1;
     display: block;
     border-radius: 50px;
     margin: 3px 0;
     position: relative;
   }
   .inGrp label {
     padding: 8px 14px;
     padding-left: 18px;
     width: calc(111% - 30px);
     display: block;
     border-radius: 50px;
     text-align: left;
     color: #666;
     box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
     cursor: pointer;
     position: relative;
     z-index: 2;
     transition: color 200ms ease-in;
     overflow: hidden;
	 font-size: 18px;
   }
   .inGrp label:before {
     width: 25px;
     height: 10px;
     border-radius: 50%;
     content: "";
     /* background-color: #8400ff; */
     background: #7F00FF;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #E100FF 0%, #7F00FF 100%);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #E100FF 0%, #0b3db3 50%);
     position: absolute;
     left: 20%;
     top: 50%;
     transform: translateX(-80px) scale3d(0.1, 0.1, 0.1);
     transition: all 750ms cubic-bezier(0.4, 0, 0.2, 1);
     opacity: 0;
     z-index: -1;
   }
   .inGrp label:after {
     width: 25px;
     height: 25px;
     content: "";
     border: 2px solid #b3b3b3;
     background-color: #fff;
     background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
     background-repeat: no-repeat;
     background-position: 3px 3px;
     border-radius: 50%;
     z-index: 2;
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     transition: all 200ms ease-in;
   }
   .inGrp input:checked ~ label {
     color: #fff;
     font-weight: 500;
	 font-size: 18px;
   }
   .inGrp input:checked ~ label:before {
     transform: translate(-50%, -50%) scale3d(56, 56, 1);
     opacity: 1;
   }
   .inGrp input:checked ~ label:after {
     background-color: #ff3800;
     border-color: #feffff;
   }
   .inGrp input {
     width: 14px;
     height: 14px;
     order: 1;
     z-index: 2;
     position: absolute;
     right: 30px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     visibility: hidden;
   }

   .frma {
     max-width: 1080px;
     margin: 50px auto;
     font-size: 18px;
     font-weight: 600;
     line-height: 36px;
   }

    .frmb {
      max-width: 1080px;
      margin: 10px auto;
      font-size: 15px;
      /*font-weight: 600;*/
      /*line-height: 36px;*/
      }

   *,
   *::before,
   *::after {

   }

/*
*,
*::before,
*::after {
  box-sizing: inherit;
}
*/
/* ==========================================================================
   classic radio    maybe not used
   ========================================================================== */

   .radio {

      display: flex;
       position: relative;
       padding-left: auto;
       margin-bottom: 10px;
       cursor: pointer;
       font-size: 14px;
       border: solid 1px #fff;
       border-bottom-color: gainsboro;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none
   }

   /* Hide the browser's default radio button */
   .radio input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
   }

   /* Create a custom radio button */
   .checkround {

       position: absolute;
       top: 1px;
       right: 3px;
       left:auto;
       height: 14px;
       width: 14px;
       background-color: lightgrey;
       border-color: lightgrey;
       border-style: inherit;
       border-width: 2px;
       border-radius: 30%;
   }


   /* When the radio button is checked, add a blue background */
   .radio input:checked ~ .checkround {
       background-color: lightgrey;
   }

   /* Create the indicator (the dot/circle - hidden when not checked) */
   .checkround:after {
       content: "";
       position: absolute;
       display: none;
   }

   /* Show the indicator (dot/circle) when checked */
   .radio input:checked ~ .checkround:after {
       display: block;
   }

   /* Style the indicator (dot/circle) */
   .radio .checkround:after {
      left: 1px;
      top: 1px;
      width: 8px;
      height: 8px;
      border-radius: 30%;
      background: darkorchid;


   }

   /* The check */
   .check {
       display: block;
       position: relative;
       padding-left: 25px;
       margin-bottom: 12px;
       padding-right: 15px;
       cursor: pointer;
       font-size: 18px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       overflow-x:hidden
   }

   /* Hide the browser's default checkbox */
   .check input {
       position: relative;
       opacity: 0;
       cursor: pointer;
       overflow-x:hidden
   }

   /* Create a custom checkbox */
   .checkmark {
       position: relative;
       top: 3px;
       left: 0;
       height: 10px;
       width: 10px;
       background-color: #fff ;
       border-color: #f8204f;
       border-style: solid;
       border-width: 2px;
       overflow-x:hidden
   }



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

   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
       content: "";
       position: absolute;
       display: none;
   }

   /* Show the checkmark when checked */
   .check input:checked ~ .checkmark:after {
       display: block;
   }

   /* Style the checkmark/indicator */
   .check .checkmark:after {
       left: 5px;
       top: 1px;
       width: 5px;
       height: 10px;
       border: solid ;
       border-color:#f8204f;
       border-width: 0 3px 3px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
   }

   .cust-btn{
   	margin-bottom: 10px;
   	background-color: #f8204f;
   	border-width: 2px;
   	border-color: #f8204f;
   	color: #fff;
   }
   .cust-btn:hover{

   	border-color: #f8204f;
   	background-color: #fff;
   	color: #f8204f;
   	border-radius: 20px;
   	transform-style: 2s;

   }
/* ==========================================================================
   #SELECT2
   ========================================================================== */
   .select--no-search .select2-search {
     display: none !important;
   }

   .rs-select2 .select2-container {
     width: 100% !important;
     height: 45px;
     outline: none;
     background: #fafafa;
     -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
     -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
     box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 25px;
   }

   .rs-select2 .select2-container .select2-selection--single {
     outline: none;
     border: none;
     height: 50px;
     background: transparent;
   }

   .rs-select2 .select2-container .select2-selection--single .select2-selection__rendered {
     line-height: 50px;
     padding-left: 0;
     color: #555;
     font-size: 16px;
     font-family: inherit;
     padding-left: 22px;
     padding-right: 50px;
   }

   .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow {
     height: 50px;
     right: 20px;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
   }

   .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b {
     display: none;
   }

   .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after {
     font-family: "Material-Design-Iconic-Font";
     content: '\f2f9';
     font-size: 24px;
     color: #999;
     -webkit-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     transition: all 0.4s ease;
   }

   .rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after {
     -webkit-transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
     -ms-transform: rotate(-180deg);
     -o-transform: rotate(-180deg);
     transform: rotate(-180deg);
   }

   .select2-container--open .select2-dropdown--below {
     border: none;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
     box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
     border: 1px solid #e0e0e0;
     margin-top: 5px;
     overflow: hidden;
   }

   .select2-container--default .select2-results__option {
     padding-left: 22px;
   }

/*==============================================
select bootstrap
=============================================*/
.fom-c{
  display:block;
  width: calc(100% - 30px);
  height:25px;
  padding:.375rem .75rem;font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height:1.5;
  color:#8400ff;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #ced4da;
  border-radius: 50px;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}

  @media screen and (prefers-reduced-motion:reduce){
    .fom-c{
      transition:none}
  }

/* ==========================================================================
   #TITLE
   ========================================================================== */
.title {
  font-size: 24px;
  color: #525252;
  font-weight: 500;
  margin-bottom: 40px;
}
.title2 {
  font-size: 24px;
  color: #525252;
  font-weight: 300;
  margin-bottom: 40px;
}

/* ==========================================================================
   #Bootstrap alert panel
   ========================================================================== */

.alert{
  padding: 8px;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  text-align: right;
  margin-bottom:20px;
  border:1px solid transparent;
  border-radius:4px
}

.alert-success{
  color: darkgreen /*#3c763d*/;
  background-color:#dff0d8;
  border-color:#d6e9c6;
}

.alert-info{
  color:#31708f;
  background-color:#d9edf7;
  border-color:#bce8f1
}

.alert-warning{
  color:#8a6d3b;
  background-color:#fcf8e3;
  border-color:#faebcc
}

.alert-danger{
  color: crimson /*#a94442*/;
  background-color:#f2dede;
  border-color:#ebccd1
}
/* ==========================================================================
   #CARD
   ========================================================================== */
.card {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
/*  background: #fff;*/
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}
img {
  display: block;
  padding: auto;
  margin-left: auto;
  margin-right: -19px;
  width: 102px;

}

.gs2b {
  padding: 2px;
  margin-top: 1px;
  margin-bottom: 10px;
  border-bottom: 2px solid #efeeee;
}

.label {
  font-size: 18px;
  font-weight: 650;
  color: #3f3f3f;
  text-transform: capitalize;
  display: block;
  margin-bottom: 2px;
}

.label2 {
  font-size: 14px;
  font-weight: 600;
  color: #7379b9;
  text-transform: capitalize;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}

.lbl{
  color: black;
  font-size: 20px;
}

.lblb{
  color: #353535;
  font-size: 20px;
  font-weight: 600;
}

.lbl0{
  font-size: 30px;
  font-weight: 600;
  color: #0035ff;
  margin-left: 3px;
  margin-right: auto;
}

.lbl1{
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin-left: 3px;
  margin-right: auto;
}

.lbl2{
  color: #353535;
  font-size: 16px;
  margin-left: 5px;
}

.lbl2b{
  color: #353535;
  font-size: 16px;
  font-weight: 600;
  margin-left: 5px;
}

.lbl2c{
  color: #353535;
  font-size: 12px;
  font-weight: 500;
  margin-left: 5px;
}

.card3{
  background-color: #04fb00;
  /*opacity: 0.7;
  display: flex;*/
  border-radius: 15px;
  padding: 25px;
  position: relative;
  box-shadow: 0 5px 15px rgba(92, 99, 105, .2);

}
.card-4 {
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  /* margin: 15px; */
  padding: 30px;
  width: 100%;
}

.card7{
  font-size: 11px;
  font-weight: 300;
  color: darkgreen;
  padding:15px;
  margin-top: 15px;
  border:1px solid transparent;
  border-radius: 10px;
  background-color:#dff0d8;
  border-color:#d6e9c6
}

.card8{
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  padding:15px;
  margin-top: 15px;
  border:1px solid transparent;
  border-radius: 10px;
  color: darkgreen /*#3c763d*/;
  background-color:#dff0d8;
  border-color:#d6e9c6
}


.card-4 .card-body {
  padding: 10%;
}

@media (max-width: 960px) {
  .wrapper {
    display: flex;
    padding: 1% 3%;
  }

  .card-4 .card-body {
    padding: 25px;
  }

  .ro1 {
    display: block;
    flex-direction: row;
    justify-content:left;
  }

  .ro2 {
    display: flex;
    flex-direction: row;
    justify-content:left;
  }

  .ro3 {
    display: flex;
    flex-direction: row;
    justify-content:left;
    margin-left: 2.2rem;
  }

  .col-0 {
    display: flex;
    flex-direction: column;
    /* background-color: crimson; */
  }

  .col-0b {
    display: flex;
    flex-direction: column;
    margin-left: 3px;
    margin-right: 0;
    justify-content: flex-start;
    /* background-color: aqua; */
  }

.autohide {display: block;}

li.a {
  list-style: none;
}
li.a:before {
  justify-content: left;
  content: "\f0eb"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: flex;
  margin-right: -0.5em;
  margin-top: 0.2em;
  width: 1rem;
}

li.b0 {
  list-style: none;
}
li.b0:before {
  justify-content: left;
  content: "\f2b5"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: block;
  margin-top: 0.2em;
  margin-right: 1px;
  width: 100%;
}

li.b {
  list-style: none;
}
li.b:before {
  justify-content: left;
  content: "\f2b5"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: block;
  margin-top: 0.2em;
  margin-right: 30px;
  width: 100%;
}

li.b2 {
  list-style: none;
}
li.b2:before {
  justify-content: left;
  content: "\f2b5"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: block;
  margin-top: 0.2em;
  margin-right: 9px;
  width: 100%;
}

li.b3 {
  list-style: none;
}
li.b3:before {
  justify-content: left;
  content: "\f2b5"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: block;
  margin-top: 0.2em;
  margin-right: 1px;
  width: 100%;
}

li.c {
  list-style: none;
}
li.c:before {
  justify-content: left;
  content: "\f14a"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: flex;
  margin-right: -0.5em;
  margin-top: 0.2em;
  width: 1rem;
}

h7 {
  color: black;
  font-size: 14px;
  font-weight: 300;
}

h8 {
  color: darkgreen;
  font-size: 11px;
  font-weight: 400;
}


h9 {
  color: black;
  font-size: 11px;
  font-weight: 400;
}

}