:root{
  --cMain1: #FBDC49 ;
  --cMain2: #ECECEC ;
  --cMain3: #ee8033 ;
  --cMain4: #000 ;
  --cMain5: #CF4DCE ;
  --cMain6: #CF4DCE ;
  --cMain7: #180161 ;
}

@font-face {
    font-family: Roboto;
    src: url('/assets/fonts/Roboto/Roboto-Regular.ttf');
  }
@font-face {
    font-family: RobotoItalic;
    src: url('/assets/fonts/Roboto/Roboto-Italic.ttf');
  }
@font-face {
    font-family: RobotoBold;
    src: url('/assets/fonts/Roboto/Roboto-Bold.ttf');
  }            
@font-face {
    font-family: RobotoBoldItalic;
    src: url('/assets/fonts/Roboto/Roboto-BoldItalic.ttf');
  }       
@font-face {
    font-family: RobotoThin;
    src: url('/assets/fonts/Roboto/Roboto-Thin.ttf');
  }
@font-face {
    font-family: RobotoThinItalic;
    src: url('/assets/fonts/Roboto/Roboto-ThinItalic.ttf');
  }

@font-face {
    font-family: RobotoLight;
    src: url('/assets/fonts/Roboto/Roboto-light.ttf');
  }

@font-face {
    font-family: RobotoLightItalic;
    src: url('/assets/fonts/Roboto/Roboto-LightItalic.ttf');
  }

@font-face {
    font-family: RobotoMedium;
    src: url('/assets/fonts/Roboto/Roboto-Medium.ttf');
  }            
@font-face {
    font-family: RobotoMediumItalic;
    src: url('/assets/fonts/Roboto/Roboto-MediumItalic.ttf');
  }      

@font-face {
    font-family: RobotoBlack;
    src: url('/assets/fonts/Roboto/Roboto-Black.ttf');
  }            
@font-face {
    font-family: RobotoBlackItalic;
    src: url('/assets/fonts/Roboto/Roboto-BlackItalic.ttf');
  }   
  

@font-face {
  font-family: 'Gilroy_Thin';
  src: url('../../fonts/Gilroy/Gilroy-Thin.eot');
  src: url('../../fonts/Gilroy/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Thin.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Thin.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Thin.svg#Gilroy_Thin') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Light';
  src: url('../../fonts/Gilroy/Gilroy-Light.eot');
  src: url('../../fonts/Gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Light.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Light.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Light.svg#Gilroy_Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Light_Italic';
  src: url('../../fonts/Gilroy/Gilroy-LightItalic.eot');
  src: url('../../fonts/Gilroy/Gilroy-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-LightItalic.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-LightItalic.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-LightItalic.svg#Gilroy_Light_Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Regular';
  src: url('../../fonts/Gilroy/Gilroy-Regular.eot');
  src: url('../../fonts/Gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Regular.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Regular.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Regular.svg#Gilroy_Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Regular_Italic';
  src: url('../../fonts/Gilroy/Gilroy-RegularItalic.eot');
  src: url('../../fonts/Gilroy/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-RegularItalic.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-RegularItalic.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-RegularItalic.svg#Gilroy_Regular_Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Medium';
  src: url('../../fonts/Gilroy/Gilroy-Medium.eot');
  src: url('../../fonts/Gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Medium.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Medium.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Medium.svg#Gilroy_Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Medium_Italic';
  src: url('../../fonts/Gilroy/Gilroy-MediumItalic.eot');
  src: url('../../fonts/Gilroy/Gilroy-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-MediumItalic.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-MediumItalic.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-MediumItalic.svg#Gilroy_Medium_Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_SemiBold';
  src: url('../../fonts/Gilroy/Gilroy-SemiBold.eot');
  src: url('../../fonts/Gilroy/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-SemiBold.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-SemiBold.svg#Gilroy_SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_SemiBold_Italic';
  src: url('../../fonts/Gilroy/Gilroy-SemiBoldItalic.eot');
  src: url('../../fonts/Gilroy/Gilroy-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-SemiBoldItalic.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-SemiBoldItalic.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-SemiBoldItalic.svg#Gilroy_SemiBold_Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Bold';
  src: url('../../fonts/Gilroy/Gilroy-Bold.eot');
  src: url('../../fonts/Gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Bold.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Bold.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Bold.svg#Gilroy_Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Bold_Italic';
  src: url('../../fonts/Gilroy/Gilroy-BoldItalic.eot');
  src: url('../../fonts/Gilroy/Gilroy-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-BoldItalic.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-BoldItalic.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-BoldItalic.svg#Gilroy_Bold_Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_ExtraBold';
  src: url('../../fonts/Gilroy/Gilroy-ExtraBold.eot');
  src: url('../../fonts/Gilroy/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-ExtraBold.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-ExtraBold.svg#Gilroy_ExtraBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_Black';
  src: url('../../fonts/Gilroy/Gilroy-Black.eot');
  src: url('../../fonts/Gilroy/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Gilroy/Gilroy-Black.woff') format('woff'),
        url('../../fonts/Gilroy/Gilroy-Black.ttf') format('truetype'),
        url('../../fonts/Gilroy/Gilroy-Black.svg#Gilroy_Black') format('svg');
  font-weight: normal;
  font-style: normal;
}


*{
  box-sizing: border-box;
  margin:0 ;
  padding:0 ;
}

/* body {
    font-family: Roboto;
    font-size: 1.1rem;

    background: url("/assets/crms/images/bg/triptour-01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
} */

body {
  font-family: Gilroy_Medium;
  font-size: 1.1rem;
  background-color:#fff;
}

input {  
    width: 100%;
    padding: 12px 20px !important;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius:40px !important;
    background-color:#ECECEC;
    color:#000;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; 
}
input:hover{
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: rgba(0, 0, 0, 1);
    background-color:rgba(0, 0, 0, 0.5);
    color:#fff;
}
input:focus{
    border-color: rgba(255, 255, 255, 1); 
    background-color:rgba(0, 0, 0, 0.5);
    color:#fff;
}
button {
    background-color: var(--cMain1);
    color: #000;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius:40px;
    font-weight: bold;
}
button:hover {
    opacity: 0.8;
}

.display-none{
  display: none;
}

.input-group22{
  display: flex;
}

.togglePassword{
  position: absolute;
  padding: 12px 20px;
  color: #000;
  font-size:20px;
  right:0;
  top:5px;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius:40px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; 
}

.indicator{
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:10 0 ;
}
.indicator span{
  width: 100%;
  height: 100%;
  background-color: lightgray;
  position: relative;
  padding-top:0.3rem;
}
.indicator span:before{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  border-radius: 5px;
}

.cancelbtn{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

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

.img-logo{
    width: 7em;
}

.container-shading{
    position:absolute;
    width:100%;
    height:100vh;
    /* background-color: #DC8449; */
    background-color: #;
    opacity:0.3;
}

.boxLogin{
    padding: 2rem;
    position: absolute;
    top:50%;
    left:50%;
    /* color:white; */
    color:#000;
    transform: translate(-50%, -50%);
    max-width: 500px;
    /* max-height: 900px; */
    min-height: 500px;
    /* background-color: rgba(0,0,0,0.3); */
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.profile-image-pic{
    width:150px;
}

input[type="checkbox"]{
    width:1rem;
    margin-right:.5rem;
    accent-color: #FFB26B;
    top: .8rem;
    scale: 1.7;
    color:#fff;
}

.g-recaptcha {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 0.6rem ;
    margin-bottom: 0.4rem ;
}

.pesan-login{
    margin-top:1rem;
    min-height:3em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.infoBox{
  padding: 2rem;
  position: absolute;
  top:50%;
  left:50%;
  color: var(--cMain4);
  transform: translate(-50%, -50%);
  max-width: 1200px;
  max-height: 800px;
  background-color: var(--cMain1);
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.infoButton {
  display: inline-block;
  background-color: var(--cMain3);
  color: var(--cMain2);
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 10em;
  border-radius:40px;
  text-decoration: none;
}
.infoButton:hover {
  opacity: 0.8;
  color: var(--cMain2);
  border: solid 1px var(--cMain3);
  background-color: var(--cMain1);
  color: var(--cMain4);
}

.infoButtonBack {
  display: inline-block;
  background-color: var(--cMain7);
  color: var(--cMain2);
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 10em;
  border-radius:40px;
  text-decoration: none;
}
.infoButtonBack:hover {
  opacity: 0.8;
  color: var(--cMain2);
  border: solid 1px var(--cMain3);
  background-color: var(--cMain1);
  color: var(--cMain4);
}

.infoImage{
  width:200px;
  background-color: transparent;
  border-color: transparent;
}

.myCursor{
  cursor: "pointer";
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}