@import url(https://fonts.googleapis.com/css?family=Nunito);

:root{--blue:#3490dc;--indigo:#6574cd;--purple:#9561e2;--pink:#f66d9b;--red:#e3342f;--orange:#f6993f;--yellow:#ffed4a;--green:#38c172;--teal:#4dc0b5;--cyan:#6cb2eb;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#3490dc;--secondary:#6c757d;--success:#38c172;--info:#6cb2eb;--warning:#ffed4a;--danger:#e3342f;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:"Nunito",sans-serif;--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block
}

body {
	margin: 0;
	font-family: Nunito, sans-serif;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.6;
	color: #212529;
	text-align: left;
	background-color: #fff
}

[tabindex="-1"]:focus {
	outline: 0!important
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: .5rem
}

p {
	margin-top: 0;
	margin-bottom: 1rem
}

* {
	box-sizing: border-box;
	font-family: Nunito, sans-serif;
}

.center{
	text-align: center;
}

.iniciar-secion {
	box-sizing: border-box;
	font-family: Nunito, sans-serif;
}

.desktop {
	display: block;
}

.mobile {
	display: none;
}

.log-form {
	width: 370px;
	background: #fff;
	margin: 13% auto 0 auto;
	display: block;
}

.reset_password {
	width: 40%;
	background: #fff;
	position: absolute;
	top: 25%;
	left: 35%;
	float: left;
}

.input-container {
	display: -ms-flexbox;
	/* IE10 */
	display: flex;
	width: 100%;
	float: left;
	margin-bottom: 15px;
}

.after_button {
	margin-bottom: 5px;
}

.icon {
	padding: 10px;
	background: #fff;
	border: 1px solid grey;
	color: black;
	min-width: 50px;
	text-align: center;
}

.input-container input {
	border: 1px solid #ccc;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	width: 90%;
	padding: 15px;
	outline: none;
}

.input_password,
.input_email {
	margin:0px;
}

/* Set a style for the submit button */

.btn {
	border-radius: 5px;
	float: left;
	background-color: #89c144;
	color: #fff;
	padding: 10px 0px;
	border: none;
	cursor: pointer;
	opacity: 0.9;
	width: 125px;
	font-size: 15px;
}

.btn svg {
	vertical-align: middle;
	width: 26px;
	text-align: left;
	position: relative;
	left: -7px;
	top: -1px;
}

.user,
.lock,
.pass_user {
	/*height: 50px;*/
	border-right: 0 !important;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border: 1px solid #ccc;
	padding: 10px 10px;
}

.section-info {
	float: right;
	margin-top: 2%;
	margin-left: 3%;
	vertical-align: middle;
	color: #6c757d;
	display: none;
}

.section-info svg {
	vertical-align: middle;
}

h3 {
	text-align: left;
}

.reset_pass {
	color: #9358ed;
	text-decoration: none;
	float: left;
}

svg.feather.feather-info {
	width: 15px;
	height: 15px;
}

.user svg,
.lock svg {
	vertical-align: middle;
	color: #6c757d;
}

.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
	padding: 13px;
	border-radius: 5px;
}

.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	padding: 13px;
	border-radius: 5px;
}

.main_sec_container {
	width: 100%;
	margin: 0 auto;
	float: left;
}

.container_register {
	width: 50%;
	margin: 0 auto;
	margin-top: 5%;
	float: left;
	position: relative;
	left: 25%;
}

.form-group {
	width: 100%;
	float: left;
	padding: 1%;
}

.col-md-6 {
	width: 50%;
	float: left;
	padding: 0% 1%;
	flex: 0 0 50%
}

.form-control {
	display: block;
	width: 100%;
	float: left;
	padding: .375rem .75rem;
	font-size: .9rem;
	line-height: 1.6;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn_submit {
	background-color: #5578EB;
	color: #fff;
	padding: 10px 12px;
	border: 1px solid #5578EB;
	border-radius: 5px;
}

.toggle-btn {
	width: 50%;
}

.invalid-feedback {
	color: red;
}

.desktop_container {
	width: 300px;
	margin: 0 auto;
	margin-top: 1%;
}

.desktop_container a {
	color: #666666;
}

.icon_section {
	position: absolute;
	padding: 0;
	float: right;
}

.employer_info {
	width: 100%;
	float: left;
	text-align: center;
	margin-top: 5%;
}

.allbuttons {
	width: 100%;
	float: left;
}

.start_button {
	background-color: rgb(203, 238, 203);
	color: #3c6819;
	padding: 9px 23px;
	width: 100%;
	font-size: 16px;
	cursor: pointer;
	border:none;
	border-radius: 2px;
	font-weight: 500;
}

#stopbtn{
	background:rgb(119, 189, 255);
	color:#fff;
}

.pausebtntwo,
.pausebtnone{
	background: rgb(219, 173, 173);
    border: none;
    color: #fff;
}

.start_button svg {
	float: left;
	vertical-align: middle;
}

.btn-primary{
	background-color: #89c144!important;
    border-color: #89c144!important;
}

.btn-danger{
	background-color: #c14463 !important;
    border-color: #c14463 !important;
}

.title {
	font-size: 22px;
	text-align: center;
	color: #333333;
}

.text_content {
	margin-top: -5px;
	font-size: 18px;
	color: #333333;
	margin-bottom: 0px;
}

.emplyee_name {
	color: #C6C6C6;
	font-size: 20px;
	margin-bottom: 10px;
}

.time_des {
	padding: 0% 0;
	font-size: 16px;
	color: #333333;
	margin-bottom: 3px;
}

.start_cronometer {
	margin-top: -2px;
	color: #6f6b6b;
	font-size: 13px;
	margin-bottom: 10px;
}

span#chronotimehours,
span#chronotimeminutes,
span#chronotimeseconds{
	font-family: 'circular';
	font-weight: bold;
}

.from_to {
	color: #D0D0D0;
	font-size: 13px;
	padding-top: 2%;
	margin-bottom: 0;
	font-weight: 400;
}

.signature {
	font-size: 20px;
	font-weight: 400;
	color: #3c3c3c;
}

.motive_pause_loaded {
	padding:7px;
	background: #f2f2f2;
	margin-bottom: 7px;
	color: #333333;
	font-size: 14px;
	font-size: 14px;
/*	border:1px solid #e4e4e4;  */
}

.seperator {
    margin-top:5px;
	margin-bottom:5px;	
}

.final_journey {
	padding: 2% 0;
	color: #4C4C4C;
	font-weight: 400;
}

#hoursdonetoday {
	color: #818181;
	font-size: 14px;
	text-align: center;
}

#colors_sketch {
	width: 100%;
	height: auto;
	border: 2px solid #BBBBBB;
	border-radius: 3px;
}

.arrive_stand_after {
	border: 2px solid #BBBBBB;
	border-radius: 5px;
	margin-bottom: 10px;
}

.desktop_container a:hover {
	color: #666666;
}

input[type=date]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
}

input[type="date"]:before {
	content: attr(placeholder) !important;
	color: #aaa;
	margin-right: 0.5em;
}

input[type="date"]:focus:before,
input[type="date"]:valid:before {
	content: "";
}

.time_info{
	color:#6d6b6b;
}


@media (max-width: 1024px) {
	.toggle-btn {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.btn-primary,
	.btn-danger {
		width: 30% !important;
	}
	.second_input {
		margin-top: 20px;
	}
}

.text_left {
	text-align: left;
}

.first_row {
	padding-left: 0px;
	height: 50px;
}

.div1 {
	margin-left: 5%;
	width: 22%;
	float: left;
}

.div2 {
	width: 27%;
	float: left;
	padding-left: 0px;
	padding-top: 5px;
}

.div3 {
	width: 22%;
	float: left;
}

.div4 {
	width: 18%;
	float: left;
	padding-left: 0px;
	padding-top: 5px;
}

.btn_color {
	background-color: #5578EB;
}

.display_none {
	display: none;
}

.employer_email {
	display: none;
	margin: 0px;
	padding: 0px;
}

.display_block {
	display: block;
}

.email_section {
	color: red;
	margin-top: 5px;
	margin-bottom: 5px
}

.modal-dialog {
	max-width: 550px !important;
}

.sub_btn {
	width:30%;
	background: #dadada !important;
    border: none !important;
    color: #000 !important;
}

.btn_logout {
	margin-left:10px;
	width:30%;
	background: #dadada!important;
}

.logout-buttons a,
.logout-buttons input{
	float: right;
}

.forgot_link{
	text-decoration:none;
	font-size:12px;
}

.registrate {
    color: #63676b;
    font-size: 12px;
}

.registrate a{
	text-decoration: underline;
}

.registrate a:hover{
	font-weight:bold;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd  {
	display: none !important;
}

body{
	top:0!important
}

/* Estilo del contenedor principal */
#google_translate_element {
    position: fixed;
    top: 10px; /* Ajusta según tu necesidad */
    right: 10px; /* Ajusta según tu necesidad */
    z-index: 9999; /* Para que siempre esté visible */
    background: #fff; /* Fondo blanco */
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ocultar el logo de Google (opcional) */
.goog-logo-link {
    display: none !important;
}

/* Ocultar el texto "Powered by Google" */
.goog-te-gadget {
    font-size: 0; /* Oculta el texto */
}

/* Estilizar el selector de idiomas */
.goog-te-combo {
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}


 @media (max-width: 767px) 
    {
      .btn-primary,.btn-danger {
        width: 30% !important;
      }
      
      .second_input {
        margin-top: 20px;
      }
      
      .sub_btn {
		width:45% !important;
	  }
	
	  .btn_logout {
		margin-left:10px;
		width:45% !important;
	  }
    }

    .modal-dialog {
      max-width: 550px !important;
    }

    .for_clock {
    	width:100%; 
    	float:left; 
    	margin-top:-25px; 
    	text-align:center
    }

    .comenzar-jornada {
    	width:100%; 
    	text-align:center
    }

    .for_pause {
    	width:100%; 
    	float:left; 
    	margin-top:-25px; 
    	text-align:center;
    }

    .for-pause {
    	width:100%; 
    	text-align:center;
    }

    .for_start {
    	width:100%; 
    	float:left; 
    	margin-top:-25px; 
    	text-align:center;
    }

    .for-start {
    width:100%; 
    text-align:center;
	}

	.display-none {
		display:none;
	}

	.arrive_width {
		width:100%;
	}

	.color-red {
		color:red;
	}

	.for_imgcapture {
		border:1px solid #ccc;
	}

	.img_sign {
		width:100%;
		height:auto;
	}

	.for-primary-btn {
		float:right; 
		margin-left:10px;
	}

	.txt_center {
		text-align:center;
	}

	.for-tujornada {
		margin-top:15%; 
		font-size:22px;
	}

	.user_img {
		display: block;
		margin: auto;
		border-radius: 100%;
	}

	.for-file {
		width:100%;
	}