494 lines
10 KiB
CSS
494 lines
10 KiB
CSS
.test {
|
|
width: 55px;
|
|
height: 10px;
|
|
}
|
|
|
|
.panel-default > .panel-heading {
|
|
text-align: center;
|
|
}
|
|
|
|
video {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.modal-content {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.md-modal {
|
|
/* margin: auto;
|
|
position: fixed;
|
|
top: 100px;
|
|
left: 0;
|
|
right: 0;
|
|
width: 50%;
|
|
max-width: 630px;
|
|
min-width: 320px;
|
|
height: auto;
|
|
z-index: 2000;
|
|
visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
backface-visibility: hidden; */
|
|
|
|
|
|
margin: auto;
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
z-index: 2000;
|
|
visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.md-show {
|
|
visibility: visible;
|
|
}
|
|
|
|
.md-overlay {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background: rgba(228, 240, 227, 0.8);
|
|
-webkit-transition: all 0.3s;
|
|
-moz-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.md-show ~ .md-overlay {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.md-effect-12 .md-content {
|
|
-webkit-transform: scale(0.8);
|
|
-moz-transform: scale(0.8);
|
|
-ms-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s;
|
|
-moz-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.md-show.md-effect-12 ~ .md-overlay {
|
|
background-color: #e4f0e3;
|
|
}
|
|
|
|
.md-effect-12 .md-content h3,
|
|
.md-effect-12 .md-content {
|
|
background: transparent;
|
|
}
|
|
|
|
.md-show.md-effect-12 .md-content {
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.image-show {
|
|
margin: 0 auto 8px auto;
|
|
border: 2px dashed #148b8b;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.image-show .closeImage {
|
|
background-color: #fff;
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 30;
|
|
position: absolute;
|
|
top: -18px;
|
|
right: -20px;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-show .closeImage svg {
|
|
width: 40px;
|
|
position: absolute;
|
|
z-index: 30;
|
|
color: #ef4444;
|
|
display: flex;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.image-show button {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #17909040;
|
|
font-family: inherit;
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.image-show button .textUpload {
|
|
padding: 0;
|
|
margin: 0;
|
|
color: #148b8b;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.image-show button .textUploaded {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.camera_close {
|
|
position: fixed;
|
|
top: -50px;
|
|
right: 10px;
|
|
background-color: #fff;
|
|
border-radius: 50px;
|
|
width: 42px;
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
/* video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
} */
|
|
|
|
video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover !important;
|
|
}
|
|
|
|
.loadingImage {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 5;
|
|
background: #75ffff99;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
|
|
.errored {
|
|
animation: shake 300ms;
|
|
color: #eb3434 !important;
|
|
background-color: #fef2f2 !important;
|
|
border: 1px solid #eb3434 !important;
|
|
}
|
|
|
|
.timeWorkTitle {
|
|
color: #5C5C5C;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
margin: auto 0 auto 6px;
|
|
}
|
|
|
|
.groupBox,
|
|
.groupBoxRS {
|
|
background-color: #F5F5F5;
|
|
border-radius: 10px;
|
|
border: 1px solid #E7E7E7;
|
|
padding: 6px;
|
|
margin: 6px 3px;
|
|
}
|
|
|
|
.groupBox .form-control,
|
|
.groupBoxRS .form-control {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.groupBox .form-control::placeholder,
|
|
.groupBoxRS .form-control::placeholder {
|
|
color: #bfbfbf;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
|
|
.groupBox .form-control::-ms-input-placeholder,
|
|
.groupBoxRS .form-control::-ms-input-placeholder { /* Edge 12-18 */
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.groupBoxIrregular {
|
|
background-color: #F5F5F5;
|
|
border-radius: 10px;
|
|
border: 1px solid #E7E7E7;
|
|
padding: 6px;
|
|
margin: 6px 3px;
|
|
}
|
|
|
|
.groupBoxIrregular .form-control {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.groupBoxIrregular .form-control::placeholder {
|
|
color: #bfbfbf;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
|
|
.groupBoxIrregular .form-control::-ms-input-placeholder { /* Edge 12-18 */
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.btnAddTimeWork,
|
|
.btnAddTimeWorkRS {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #84CC16;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.btnRemoveTimeWork,
|
|
.btnRemoveTimeWorkRS {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #F87171;
|
|
border-radius: 7px;
|
|
padding: 3px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
|
|
|
|
.btn-workTimeOption-container {
|
|
display: flex;
|
|
}
|
|
|
|
.radio-workTimeOption {
|
|
display: none;
|
|
}
|
|
|
|
.radio-label-workTimeOption {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #0F8080;
|
|
background-color: #DDF4F4;
|
|
text-align: center;
|
|
padding: 8px 16px;
|
|
border-radius: 9px;
|
|
margin: auto 5px;
|
|
transition: all 0.3s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio-label-workTimeOption:hover {
|
|
color: #FFFFFF;
|
|
background-color: #1c7474;
|
|
border-color: #23A8A8;
|
|
}
|
|
|
|
.radio-workTimeOption:checked + .radio-label-workTimeOption {
|
|
color: #FFFFFF;
|
|
background: linear-gradient(93.83deg, #2EBEBE 1.59%, #1E9D9D 47.86%, #0B7878 101.16%);
|
|
}
|
|
|
|
.selectCheckBreakTime {
|
|
width: auto;
|
|
}
|
|
|
|
.breack-time {
|
|
border: 1px solid #ddd;
|
|
padding: 8px 0;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.extraOptionBorder {
|
|
border: 1px solid #ddd;
|
|
padding: 8px 0;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
#computeTime span,
|
|
.lableCheckBreakTime,
|
|
.labelExtraOption {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin: 0 10px;
|
|
color: #101010;
|
|
}
|
|
|
|
.hrLine {
|
|
width: 100%;
|
|
height: 1px;
|
|
background: rgb(255, 255, 255);
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(202, 202, 202, 1) 45%, rgba(255, 255, 255, 1) 100%);
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.outlineDate {
|
|
outline: 1px solid #1D9D9D;
|
|
}
|
|
|
|
.breack-time {
|
|
border: 1px solid #ddd;
|
|
padding: 8px 0;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/************************ Radio Button Input () ************************/
|
|
.form-check-input[type="radio"],
|
|
.form-check-input[type="checkbox"] {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
border: 1px solid #CFD3D4;
|
|
background-color: white;
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
margin-right: 8px;
|
|
appearance: none;
|
|
}
|
|
|
|
.form-check-input[type="radio"]:checked,
|
|
.form-check-input[type="checkbox"]:checked {
|
|
background-color: #148989;
|
|
border: 1px solid #ffffff !important;
|
|
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="3"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /%3E%3C/svg%3E');
|
|
background-size: 75%;
|
|
}
|
|
|
|
.form-check-input[type=checkbox]:indeterminate {
|
|
background-color: #148989;
|
|
border-color: #ffffff;
|
|
--bs-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e);
|
|
}
|
|
|
|
.form-check-input[type="radio"]:focus,
|
|
.form-check-input[type="checkbox"]:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-check-input[type="radio"] + label,
|
|
.form-check-input[type="checkbox"] + label {
|
|
color: #83898C;
|
|
}
|
|
|
|
.form-check-input[type="radio"]:checked + label,
|
|
.form-check-input[type="checkbox"]:checked + label {
|
|
color: #2B2F32;
|
|
}
|
|
/************************ Radio Button Input (Like Checkbox appearance) ************************/
|
|
|
|
@media (max-width: 1366px) {
|
|
.modal-dialog, .modal-content {
|
|
/*height: 622px;*/
|
|
height: 680px;
|
|
}
|
|
|
|
.form-workshop .input-group-text, .form-personal .input-group-text {
|
|
width: 70px;
|
|
}
|
|
|
|
#step-form1, #step-form2, #step-form3, #step-form4, #step-form5, #step-form6 {
|
|
height: 360px;
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 992px) {
|
|
.radio-label-workTimeOption {
|
|
font-size: 10px;
|
|
padding: 8px 8px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
#computeTime span,
|
|
.lableCheckBreakTime {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.modal-dialog, .modal-content {
|
|
/*height: 622px;*/
|
|
height: 680px;
|
|
}
|
|
|
|
.radio-label-workTimeOption {
|
|
font-size: 10px;
|
|
padding: 8px 8px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
#computeTime span,
|
|
.lableCheckBreakTime,
|
|
.labelExtraOption {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.modal-dialog, .modal-content {
|
|
height: 840px;
|
|
}
|
|
|
|
.form-workshop .input-group-text, .form-personal .input-group-text {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#step-form1, #step-form2, #step-form3, #step-form4, #step-form5, #step-form6 {
|
|
height: 360px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.container, .container-sm {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
#step-form1, #step-form2, #step-form3, #step-form4, #step-form5, #step-form6 {
|
|
height: 330px;
|
|
}
|
|
.radio-label-workTimeOption {
|
|
padding: 7px 3px;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
}
|
|
.form-control {
|
|
margin: 0 !important;
|
|
}
|
|
} |