/* Jan 14, 2021 - 10:27 */



:root {

   --xcol-gap : 1em;

   --xcol-autofill-min-width: 100px;

   --xcol-autofill-max-width: max-content;

   --xcol-autofill-gap: 5px;



   /* FORM */

   --input-padding: 15px;



   --f-family: Lexend;

}



*,

*::before,

*::after{

   box-sizing: border-box;

}



/* GLOBAL */

*{

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

}

body{padding:0;margin:0}

a{cursor: pointer;}

.center{text-align: center}



/* GRID */

.xgrid{

   display: grid;

   grid-template-columns: repeat(12, 1fr);

}



/* FLEX */

.xcol{

   display: flex;

   flex-wrap: wrap;

   gap: var(--xcol-gap);

}

.xcol > * {

   flex-grow: 1;

}



/* FLOAT */

.grid{width:100%}

.grid::after{

   display: table;

   content:'';

   clear: both;

}

.fl-2{width:20%;float:left}

.fl-3{width:30%;float:left}

.fl-4{width:40%;float:left}

.fl-5{width:50%;float:left}

.fl-6{width:60%;float:left}

.fl-7{width:70%;float:left}

.fl-8{width:80%;float:left}



/* DASHBOARD */

.dash-content{width:100%;padding:40px;display: table}

.dash-widget{padding:2px;width:100%}

.dash-box{width:100%; border:solid 1px #ececec;border-radius:5px;background-color:#fff;padding:20px}



/* NAV */

.x-nav{width:100%}

.x-nav div{

   float:left;

   border:solid 1px #ccc;

   padding:5px;

}

.x-nav div div{

   float:none;

   margin-top:5px;

}



/* SIDEBAR */

.xsidenav *{

   font-family: var(--f-family);

}



/* INFO */

.xinfo-notice{

  border: solid 1px #dbe8e1;

  background-color: #fafdff;

  padding: 15px;

  font-family: Lexend;

  font-size: 0.8rem;

  line-height: 1.2rem;

  border-radius: 5px;

  color: #515151;

}

.xinfo-warning{

  border: solid 1px #ffc9c9;

  background-color: #fff6f6;

  padding: 15px;

  font-family: Lexend;

  font-size: 0.8rem;

  line-height: 1.2rem;

  border-radius: 5px;

  color: #515151;

}

.xinfo-warning-title{

  color: #ff5d38;

}

.placeholder-text{

   position: absolute;

   padding: 18px;

   font-size: 0.9rem;

}

.xform-placeholder .placeholder-input input{

   padding-left: 42px;

}

   /* FORM WIDTH 100% */

.xform-100{width:100%}

.xform-100 input[type=text],input[type=email],textarea{width:100%;}



   /* FORM WIDTH 100% */

.form-100{width:100%}

.form-100 input[type=text],input[type=email],textarea{width:100%;}



/* INPUT WITH BUTTON SEARCH */

/*

<div class=xinput-search>

  <input type=text>

  <div><i class='fa fa-search'></i></div>

</div>

*/

.xinput-search{

  width: 100%;

  position: relative;

}

.xinput-search input,

.xinput-search div{

  position: absolute;

}

.xinput-search input{

  width: 100%;

  padding-right: 40px;

  font-family: var(--f-family);

  font-size: 0.8rem;

}

.xinput-search input:focus{

  outline: none;

}

.xinput-search div{

  border: solid 1px #ccc;

  border-radius: 3px;

  right: 4px;

  top: 4px;

  width: 30px;

  height: 30px;

  font-size: 1.3rem;

  color: grey;

  text-align: center;

  box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.1);

  cursor: pointer;

}

.xinput-search div:hover{

  background-color: #efefef;

}

/* SELECT */

.xselect{

   position: relative;

}

.xselect select{

   margin: 0;

   font-weight: 400;

   font-size: 0.85rem;

}

.xselect-arrow{

   position: absolute;

   top:0;

   right:0;

   display: block;

   background:#f4f4f4;

   height: 100%;

   width:3em;

   pointer-events: none;

   cursor: pointer;

}

.xselect-arrow::before,

.xselect-arrow::after{

   --size: .5em;

   content: '';

   position: absolute;

   width:0;height:0;

   left:50%;

   top: 50%;

   transform: translate(-50%, -50%)

}

.xselect-arrow::before{

   border-left: solid var(--size) transparent;

   border-right: solid var(--size) transparent;

   border-bottom: var(--size) solid #b7b7b7;



   top: 38%;

}

.xselect-arrow::after{

   border-left: solid var(--size) transparent;

   border-right: solid var(--size) transparent;

   border-top: var(--size) solid #b7b7b7;



   top: 62%;

}



/* RADIO */

.xradio-div{

  display: block;

}

.xradio{

  padding: 10px 0;

}



/* TOGGLE */

:root {

   --toggle-top: 2.5px;

   --toggle-size: 14px;

   --toggle-width: 32px;

   --toggle-height: 17px;

   --toggle-transform:14px;

}

.xtoggle{

   position: relative;

   display: inline-block;

   width: var(--toggle-width);

   height: var(--toggle-height);

   top: var(--toggle-top);

}

.xtoggle input{

   opacity: 0;

   width: 0;

   height: 0;

}

/* The slider */

.xtoggle-slider {

   position: absolute;

   cursor: pointer;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: #ccc;

   -webkit-transition: .4s;

   transition: .4s;

   border-radius: 34px;

 }



 .xtoggle-slider:before {

   position: absolute;

   content: "";

   height: var(--toggle-size);

   width: var(--toggle-size);

   left: 2px;

   bottom: 2px;

   background-color: white;

   -webkit-transition: .4s;

   transition: .4s;

   border-radius: 50%;

 }



/* TOOLTIP */

.xtooltip {

   position: relative;

   display: inline-block;

   border-bottom: 1px dotted black;

 }



 .xtooltip .xtooltiptext {

   visibility: hidden;

   width: 120px;

   background-color: #555;

   color: #fff;

   text-align: center;

   border-radius: 6px;

   padding: 5px 0;

   position: absolute;

   z-index: 1;

   bottom: 125%;

   left: 50%;

   margin-left: -60px;

   opacity: 0;

   transition: opacity 0.3s;

 }



 .xtooltip .xtooltiptext::after {

   content: "";

   position: absolute;

   top: 100%;

   left: 50%;

   margin-left: -5px;

   border-width: 5px;

   border-style: solid;

   border-color: #555 transparent transparent transparent;

 }



 .xtooltip:hover .xtooltiptext {

   visibility: visible;

   opacity: 1;

 }



 input:checked + .xtoggle-slider {

   background-color: #2196F3;

 }



 input:focus + .xtoggle-slider {

   box-shadow: 0 0 1px #2196F3;

 }



 input:checked + .xtoggle-slider:before {

   -webkit-transform: translateX(var(--toggle-transform));

   -ms-transform: translateX(var(--toggle-transform));

   transform: translateX(var(--toggle-transform));

 }



/* COVER */

.xpopup{

  position:fixed;top:0;

  left:0;

  width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:10000;

  display: grid;

  justify-content: center;

  align-content: center;

}

.xpopup-box{

  background-color: #fff;

  min-width: 400px;

  padding: 10px 20px;

  margin: auto;

  border-radius:1rem;

  position: relative;

  animation: center-animate 0.3s ease;

}



.xpopup-box::before{

  width: 50px;

  content: '';

  left: 0;

  position: absolute;

  height: 102%;

  top: -1%;

  margin-left: -30px;

  text-align: center;

  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );

  background-color: #1f8ae8;

  border-top-left-radius: 5px;

  border-bottom-left-radius: 5px;

  padding-top: 10px;

  color: #fff;

}

.xpopup-content{

  padding: 10px 10px 0 20px;

}

.xpopup-content *{

  max-width: 100%;

  max-height: 100%;

  font-family: Lexend;

  font-size: 0.8rem;

}

.xpopup-title{

  padding: 10px 0 20px;

}

.xpopup-message{

  width: 100%;

  height:max-content;

  max-width: 80vw;

  max-height: 80vh;

  overflow-y: auto;

  color: #686868;

}

.xpopup-message span{font-size:inherit}

.xpopup-message pre{font-size:inherit;white-space: pre-line}



.xpopup-div-button{

  padding: 30px 0 10px;

  display: block;

  text-align: right;

  width: 100%;

}

.xbutton:hover{background:#116fd0}



/* BUTTON DEFAULT */

.xbutton{

   background-color: #1f82e8;

   border-radius: 4px;

   border: 1px solid #5596d7;

   display: inline-block;

   cursor: pointer;

   color: #fff;

   padding: 7px 15px;

   margin:0 2px;

   color: #fff;

}

.xbutton:active, .xbutton:focus{

   outline: 0;

   outline-style: none;

   -moz-outline-style: none;

}

.xbutton-2nd{

   background-color: #e6eaf0;

   border-radius: 4px;

   border: solid 1px #cecece;

   display: inline-block;

   cursor: pointer;

   color: #3b3b3c;

   padding: 7px 15px;

   margin:0 2px;

   margin-left: auto;

}

.xbutton-lite{

   font-size:0.7rem;

   background-color: #1f82e8;

   border-radius: 3px;

   border: 1px solid #5596d7;

   display: inline-block;

   cursor: pointer;

   color: #fff;

   padding: 4px 10px;

   margin:0 2px;

}

.xbutton-2nd-lite{

   font-size:0.7rem;

   background-color: #e6eaf0;

   border-radius: 3px;

   border: solid 1px #cecece;

   display: inline-block;

   cursor: pointer;

   color: #3b3b3c;

   padding: 5px 10px;

   margin:0 2px;

}

.xbutton:disabled,

.xbutton-2nd:disabled,

.xbutton-lite:disabled,

.xbutton-2nd-lite:disabled{

   background: #EAEAEA;

   color: #959595;

   cursor: auto;

   border: solid 1px #cecece;

}

.xbutton-long{

   display: grid;

   grid-template-columns: 30px max-content;

   cursor: pointer;

}

.xbutton-long div{

   padding:5px 10px;

   font-size: 0.75rem;

   color:#ddd;

}

.xbutton-long > div:nth-child(1){

   background-color:#01378a;

   border-top-left-radius: 3px;

   border-bottom-left-radius: 3px;

}

.xbutton-long > div:nth-child(2){

   background-color: #1f82e8;

   border-top-right-radius: 3px;

   border-bottom-right-radius: 3px;

}

.xbutton-long > div:nth-child(2):hover{

   background-color: #1166bd;

}



@keyframes center-animate {

  0% {

    transform: scaleX(0%);

  }

    10% {

      transform: scaleX(10%);

    }

      20% {

        transform: scaleX(20%);

      }

  100% {

    transform: scaleX(100%);

  }

}

.xpopup-xform-row{

   width:100%;margin-bottom:10px

}

.xpopup-xform-row label{

   font-size: 0.9rem;

   font-weight: 500;

   color: #515151

}

.xpopup-xform-row input[type=text],

.xpopup-xform-row input[type=email],

.xpopup-xform-row input[type=file],

.xpopup-xform-row input[type=tel],

.xpopup-xform-row textarea,

.xpopup-xform-row select,

.xpopup-xform-row input[type=password]{

   font-size:0.9rem;

   font-family: Lexend;

   border:solid 1px #e6e2e2;

   border-radius:5px;

   padding:10px;

   margin-top:3px;

   font-weight: 500;

   color:#222;

   outline:none;

   width:100%;

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

}

.xpopup-xform-row select, option{

   font-size:1em;

   padding:10px;

   font-family: Lexend;

}

.xpopup-xform-row [role="inputfile"]{

   position: relative;

   width:100%;

   margin:5px 0 60px;

}

/* POPUP SELECT */



.xpopup-select{

   position: relative;

}

.xpopup-select select{

   margin: 0;

}

.xpopup-select-arrow{

   position: absolute;

   top:0;

   right:0;

   display: block;

   background:#dbdbdb;

   height: 100%;

   width:2.5em;

   pointer-events: none;



   cursor: pointer;

}

.xpopup-select-arrow::before,

.xpopup-select-arrow::after{

   --size: .4em;

   content: '';

   position: absolute;

   width:0;height:0;

   left:50%;

   top: 50%;

   transform: translate(-50%, -50%)

}

.xpopup-select-arrow::before{

   border-left: solid var(--size) transparent;

   border-right: solid var(--size) transparent;

   border-bottom: var(--size) solid #9d9c9c;



   top: 38%;

}

.xpopup-select-arrow::after{

   border-left: solid var(--size) transparent;

   border-right: solid var(--size) transparent;

   border-top: var(--size) solid #9d9c9c;



   top: 62%;

}



/* IMAGE GALLERY */

.xpopup-gallery{

  position: fixed;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,.7);

  z-index: 1000;

  display: grid;

  justify-content: center;

  align-content: center;

}



/* ROW & COL */



.xcol{

   display: grid;

   grid-gap: 10px;

}

.xcol-title{

   font-weight: 500;

   padding-left: 2px;

   padding-top: 5px;

   font-size: 0.8rem;

}

.xcol-2,

.mcol-2{

   grid-template-columns: 1fr 1fr;

}

.xcol-3,

.mcol-3{

   grid-template-columns: repeat(3, 1fr);

}

.xcol-4,

.mcol-4{

   grid-template-columns: repeat(4, 1fr);

}



.xcol-fill{

   display: grid;

   grid-template-columns: repeat(auto-fill, minmax(var(--xcol-autofill-min-width),var(--xcol-autofill-max-width)));

   grid-gap: var(--xcol-autofill-gap);

}

.xcol-fit{

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(var(--xcol-autofill-min-width),var(--xcol-autofill-max-width)));

   grid-gap: var(--xcol-autofill-gap);

}

.flex-fill{

   display: flex;

   flex-grow: 1;

   min-width: min-content;

   gap: 5px;

}



/* NAMING */

.no-desktop{display: none}



@media (min-width:40em){

   .xcol{

      flex-direction: row;

   }

}



@media only screen and (max-width : 480px) {

/* COVER */

  .xpopup{



    .xpopup-box::before{

      width: 40px;

      margin-left: 0;

    }

    .xpopup-box{

      padding: 10px 10px 10px 35px;

    }

  }

.xpopup-box{max-width:90%}

/* GRID */

   .fl-2,.fl-3,.fl-4,.fl-5,.fl-6,.fl-7,.fl-8{width:100%}

/* DASHBOARD */

.dash-content{padding:10px}

   .mcol-2,.mcol-3,.mcol-4{

      grid-template-columns: 1fr;

   }



   .form-general{width:100%;padding:20px;padding-bottom:60px}

   .form-general input[type=text],input[type=email]{width:100%}

   .form-general textarea{width:100%}



   /* NAMING */

   .no-mobile{display: none}

}