/* Application Form - Shilkumar Meshram, computer section, NCRA, 18/11/2020 */
/* latest update Dec 2023 */
/* Basic styling Screen view */


fieldset
 {
   border: 1px solid #b3b3b3 !important;
   margin: 0;
   padding: 10px;
   position: relative;
   border-radius:4px;
   background-color:#f5f5f5;
   padding-left:10px!important;
 }

   legend
   {
     font-size:14px;
     font-weight:bold;
     margin-bottom: 0px;
     max-width: 50%;
     border: 1px solid #b3b3b3;
     border-radius: 4px;
     padding: 8px 5px 8px 10px;
     background-color: #ffffff;
   }
.ro-guide{margin-top:26px !important;}
.heading{background-color:#17a2b8; padding: 5px 0 3px 0; color:#FFF}
/* Responsive Header Styles for all pages */
#header {
    position: relative;
    padding: 15px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#ncra_logocontainer {
    float: none;
    position: static;
    margin-bottom: 12px;
    padding-top: 0;
}
.logo_ncra {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFF;
    float: none;
    width: 80px !important;
    height: auto;
}
#header h5 { font-size: 1.1rem; margin-bottom: 5px; }
#header h6 { font-size: 0.95rem; margin-bottom: 5px; }
#header p { font-size: 0.85rem; margin-bottom: 0; }

@media (min-width: 768px) {
    #header {
        display: block;
        padding: 20px 0;
    }
    #ncra_logocontainer {
        position: absolute;
        left: 15px;
        top: 15px;
        margin-bottom: 0;
    }
    #header h5 { font-size: 1.25rem; }
    #header h6 { font-size: 1rem; }
    #header p { font-size: 1rem; }
}
.terms_conditionTexts{font-size:10pt !important;}
#curr_date{ border:none; background-color:transparent; color:#333333; font-family:inherit;}
.photo-box{border: 1px solid #B7B7B7; border-radius: 5px; padding: 2px 1px 15px 40px; margin-top: -5px;
 background-color: #f5f5f5; height: 238px;
 background-image: url("../images/photo_id.jpg"); background-position: center 40px; background-repeat: no-repeat;}

/*  https://bootsnipp.com/snippets/mvjyq  */

#my_camera{margin:0 0 0 70px !important;}
.take_snap{margin-left:155px; width:145px;}
.takea_photodiv{display:block; margin:3px 0 0 30px !important; position:absolute; bottom:5px;}
.heading-bg{position:absolute; width:100%; height:100%; display: none;}
.top_hr{display:none;}

.yellow-txt{ color:#fffb00;}

#print_form_btn{margin: auto; margin-top: auto; display: block; margin-top: 10px; cursor:pointer;}
a#go_back, a#go_back:visited{ text-decoration:none; color:#003378;}
a#go_back:hover{ text-decoration:underline;}

.modal-header-custom{background-color:#ffc107; font-family: 'Varela Round', sans-serif; color:#434e65;}
.modal-bottom-custom{}
.icon-box{color: #fff;width: 85px;height: 85px;display: inline-block;border-radius: 50%; z-index: 9;
border: 5px solid #fff;padding: 15px; margin:auto;}
.modal-header-close-custom{padding:0 !important; margin:0px 0px 0px 0px !important;}
.reload {font-family: Lucida Sans Unicode;}
.spacer{height:12px;} /* laptop PC mac address box heigth */

.submit_status{ width:auto; min-height: 300px; max-height:auto; margin: auto;
border-radius: 5px; }

.icon-box-submit_status{color: #fff;width: 85px;height: 85px; border-radius: 50%;
border: 5px solid #e6ffc8; padding: 15px; margin:auto;   }

.error_submitstatus{background-color: #FF3636; border-color: #FF7676;}
.success_submitstatus{background-color: #68BB39 !important;}

.crop_preview {
	width:60%;
}
.crop_preview img{width:70%;}

.croppie-container {
  width: 100%;
  height: 100%;
}

.croppie-container .cr-image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-height: none;
  max-width: none;
}

.croppie-container .cr-boundary {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.croppie-container .cr-viewport {
  position: absolute;
  border: 2px solid #fff;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.croppie-container .cr-original-image {
  display: none;
}

.croppie-container .cr-vp-circle {
  border-radius: 50%;
}

.croppie-container .cr-overlay {
  z-index: 1;
  position: absolute;
  cursor: move;
}

.croppie-container .cr-slider-wrap {
  width: 75%;
  margin: 15px auto;
  text-align: center;
}

.croppie-result {
  position: relative;
  overflow: hidden;
}

.croppie-result img {
  position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
  -webkit-appearance: none;
/*removes default webkit styles*/
/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
  width: 300px;
/*required for proper track sizing in FF*/
  max-width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px;
}

.cr-slider:focus {
  outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

.cr-slider::-ms-track {
  width: 100%;
  height: 5px;
  background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
border-width: 6px 0;
color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.cr-slider::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ddd;
margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}
.cr-rotate-controls button {
border: 0;
background: none;
}
.cr-rotate-controls i:before {
display: inline-block;
font-style: normal;
font-weight: 900;
font-size: 22px;
}
.cr-rotate-l i:before {
content: '↺';
}
.cr-rotate-r i:before {
content: '↻';
}