@import "./swipebox.css";
@import "./fonts.css";

/* orange #fc9219 */


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


#resetTimerButton {position:fixed; top:20px;  left: 50%;
    transform: translateX(-50%);z-index: 1000;;}

 
body, html {background-color: #e7eaf1; color: #1d1d1d;  font-family: 'Open Sans', sans-serif;}
a, a:focus{text-decoration: none; color: #1d1d1d;}
a:hover {color: #6c6b6b;}
h1, h2, h3, h4, .creato {font-family: 'Open Sans', sans-serif;font-weight: 700; letter-spacing: -2px;}
h2,h3 {letter-spacing: -1px;}
.container-fluid {--bs-gutter-x: 3rem;}
.relative {position: relative;}
.cover {background-size: cover;}
.underline {border-bottom:1px solid #5b5b5b;}
.form-select {padding-top:15px; padding-bottom: 15px;}
.form-check-input {border-color:#c9ced3}
.form-radio-input {border-color:#c9ced3}
.ulli {list-style: none; padding:0}
.form-floating>label {font-size:.95rem; padding:1rem .75rem}
.owl-theme .owl-dots {margin-top:15px}
.linkorange {color:#fc9219; border-bottom:1px solid #fc9219}
.linkorange:hover {color:#d57b15; }
label {cursor: pointer;}
input.form-control:focus, select.form-select:focus {border-color: #c4cad8 !important; box-shadow: 0 0 5px hsla(227, 17%, 80%, 0.805) !important; outline: none !important; }
.hidden {visibility: hidden;}
.radius40 {border-radius: 0 0 40px 40px;}
main {position: relative;}

.btn-large {padding: .8rem 1.5rem; font-weight: bold;}
.btn-danger {background-color: #fc9219 !important; border-color: #fc9219 !important; padding:15px 30px; border-radius:7px; font-weight: bold;}
.btn-danger:hover {background-color: #d57b15 !important;border-color: #d57b15 !important;}
.btn-danger:focus, .btn-danger:active, .btn-danger:focus-visible, .btn-danger:focus-within, .btn-danger:active:focus, .btn-danger.active {  background-color: #fc9219 !important;   border-color: #fc9219 !important;   color: white !important;}

.btn-light {background-color: #d0d0d0; border-color: #d0d0d0; color:white; padding:15px 30px; border-radius:7px; font-weight: bold;}
.btn-light:hover {background-color: #b4b4b4;border-color: #b4b4b4;}
.btn-light:focus, .btn-light:active, .btn-light:focus-visible, .btn-light:focus-within, .btn-light:active:focus, .btn-light.active {  background-color: #d0d0d0 !important;   border-color: #d0d0d0 !important;   color: white !important;}

.form-check-input:focus, .form-control:focus, .form-select:focus {box-shadow: none; border-color:#000000; }
.form-check-input:checked {background-color: #fc9219; border-color: #fc9219;}
.form-radio-input:checked {background-color: #fc9219; border-color: #fc9219;}



.btn-close {transition: transform 0.2s ease-in-out; }
.btn-close:focus {box-shadow: none; outline:0px !important; box-shadow: none !important;}
.btn-close:hover {  transform: rotate(90deg);}

.modal-header {border:none}
.modal-content {border-radius: 0; text-align: center;}
.modal-content h1 {font-size: 2rem;}
.modal-content form {margin:0 3rem 3rem 3rem}
.modal-content .btn {padding:15px 50px}

.bg {background-color: white; border-radius: 40px; }
.logo a {display:block}
.logo img {height:60px}
header {padding:2rem 1rem 1.5rem 1rem;}

.login__main {margin:3rem auto}
.login__main .bg__image {background-image: url(/images/login.webp); background-repeat: no-repeat;}
.login__content {margin-right: 4rem;}
.login__content h1 { font-size: 1.8rem}
.login__content h1 b {font-size: 3rem; display: block; font-weight: 700}
.login__content form {margin-top:2rem; padding:0 2.5rem; }
.login__content .bg-body-secondary {padding: .75rem 0; border-radius: 7px;}
.menu {margin-top:1rem}
.menu ul {list-style: none; padding:0; margin:0 }
.menu li {display:inline-block; font-size:1.05rem; padding:10px 10px 10px 0;}
.menu li:last-child {padding-right:0}
.menu li a {display:inline-block;  border-bottom:2px solid white}
.menu li a:hover, .menu a.active {border-bottom:2px solid #f8582d}
.toggle-password {cursor: pointer; position: absolute; top:50%; transform: translate(-50%, -50%); right:.5rem; opacity: .3;}

.bgcert {background: url(/images/cert.svg); border-radius: 0 0 40px 40px;}
.certificate__content {min-height: 550px; }
.certificate__content h1 {text-align: center;}
.certificate__main header {border-bottom: 1px solid #d9dde5;}
.certificate__main .form-control {padding:1rem}
.certificate__main {margin:3rem auto}

.ico:before {content:""; display: block; background-size: cover; position: absolute; top:0;}
.icosearch {opacity: .3; }
.icosearch:hover {opacity: 1; }
.icosearch:before {background-image: url(../images/search.svg); width:30px; height:30px;  top:50%; transform: translate(-50%,-50%); right:0px;}
.icoalert:before {background-image: url(../images/alert.svg); width:30px; height:30px;  top:50%; transform: translate(-50%,-50%); right:0px;}
.icodown:before {background-image: url(../images/down.svg); width:30px; height:30px;  top:50%; transform: translate(-50%,-50%); right:0px;}
.icoinfo:before {background-image: url(../images/info.svg); width:30px; height:30px;  top:50%; transform: translate(-50%,-50%); right:0px;}
.danger .form-control {font-weight: bold; color:#dc3545; border-color:rgba(255, 0, 0, 0.307)}
.success .form-control {font-weight: bold; color:green; border-color:rgba(0, 128, 0, 0.284)}

.dateofbirth__valid {background-color: #ffb69140; padding:3rem 0}

.certificate__detail h1 {font-size:2rem; margin:0 0 2rem 0}
.certificate__detail {border-top: 1px solid #d9dde5; border-bottom: 1px solid #d9dde5; padding:3rem}
.certificate__detail .foto {width: 300px; height: 400px; position:absolute; top:3rem; right: 3rem;}
.certificate__detail .strong {font-weight: bold; }
.certificate__detail .width {width:200px; }
.certificate__detail .success {font-weight: bold;}
.certificate__download {padding: 3rem; }
.certificate__download .ico {padding:12px 20px 12px 60px}
.certificate__download .ico:before {right: auto; left:1.8rem;}
.pin-input {text-align: center;font-size: 2rem;margin: 0.2rem; line-height: 0; padding:10px !important}

.alert {background-color: #f8582d; color: white; text-align: center; font-weight: bold; padding:1rem; border-radius: 0;}

.password-infobox .info {opacity:.5; }
.password-infobox .error {color:#dc3545; padding-left:2rem}
.password-infobox .icoinfo {padding-left:2rem}
.password-infobox .error:before {left: 0; right: auto; transform: none; top:-3px;}
.password-infobox .icoinfo:before {left: 0; right: auto; opacity: .7; transform: none; top:-3px;}

.welcome {font-size: 1.5rem;}
.welcome_name {display: none;}

.cardpay {background-color: #f7f8fa; padding:3rem 0;}
.cardpay h1 {font-size: 2rem; text-align: center; }
.cardpay h1 .value {margin-left:2rem; font-size: 2rem; text-align: center; font-weight: lighter; background-color: #f9d6c7; padding:7px 15px; border-radius: 7px;}
.cardcontainer {background-color: white; border-radius: 25px; padding:3rem}
.cardcontainer label {opacity: .5;}
.cardcontainer .visa {top:50%; transform: translate(-50%,-50%); right:15px; position: absolute; font-size: 1.2rem;}
.cardcontainer .close {position: absolute; font-size: 2rem; top:-20px; right:-15px;}
.cardcontainer .close a {color: silver}
.cardcontainer .close a:hover {color: black}

.download__your_cert .certificate__download {padding:0; text-align: center;}

.breadcrumb-container {position: relative;overflow: hidden;}
.breadcrumb-container::after {content: "";position: absolute;top: 0; right: 0; height: 100%;width: 5rem;background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); pointer-events: none; }
.breadcrumb {padding:1rem 3rem 1rem 2rem;display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;}
.breadcrumb a:hover {border-bottom: 1px solid black;}
.breadcrumbitem + .breadcrumbitem::before {content: ">"; display: inline-block; margin:0 .5rem; font-weight: normal;}
.breadcrumbitem.active {font-weight: 700;}

.module__main {border-bottom: 1px solid #d9dde5; border-radius:0}
.modul__video {padding:3rem 3rem 0 3rem}
.modul__video h2 {font-size: 1.5rem;}
.video-icon-container .fa-circle-play {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-size: 2.5rem; opacity: 0.8; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 50%;}
.video-icon-container .fa-circle-play:hover {color: #fc9219;}
.video-icon-container img:hover  {opacity: .9;}

.module__content a {text-decoration: underline; color:#fc9219;}

.modul__trainings {background-color: #c6d6be; padding:0 2rem 1rem 2rem}
.modul__trainings .item {transition: transform 0.3s ease;}
.modul__trainings .item a.shadow {display: block; background-color: white; position: relative; }
.modul__trainings .item:hover {transform: translateY(-10px);}
.modul__trainings .box {padding:2rem}
.modul__trainings h2 {font-size: 1.5rem; min-height:60px;}
.modul__trainings .flag {position: absolute; top:1rem; left:0; padding:6px 15px 5px 15px; color:white; font-weight: 800; line-height: 20px;}
.modul__trainings .flag.open {background-color: green;}
.modul__trainings .flag.archive {background-color: rgb(119, 119, 119);}

.training__complet {background-color: rgba(44, 168, 44, 0.78); border-radius:8px; position: absolute; top:0; left:0; z-index: 1; height: 100%; width: 100%; text-align: center;}
.training__complet .btn {font-size: 1.3rem;}
.training__complet img {margin-top:-2rem}

.module__notpass {text-align: center; background-color: #f7f7f7; padding:3rem 0; margin:2rem 0 5rem 0; } 
.module__notpass h1 {margin-top:2rem} 
.module__notpass .bell {font-size: 5rem; color:black; position: absolute; top:-3rem; left:50%; transform: translate(-50%, 0);} 

.module__alert {text-align: center; background-color: #f7f7f7; padding:3rem 0; margin:3rem 0 5rem 0; } 
.module__alert.celebration {background-color: #e6f7d0} 
.module__alert h1 {margin-top:2rem} 
.module__alert .ico {position: absolute; top:-3rem; left:50%; transform: translate(-50%, 0);} 
.module__alert.celebration .ico {top:-4rem} 

.pages {position: absolute; top:1rem; right: 2rem;  opacity:.3}
.pages b {font-weight: 800;}
.module__questions {padding:0 2rem}
.module__questions h2 {font-size: 1.4rem; letter-spacing: -1px; margin-top:2rem}
.questions {background-color: #f7f7f7; padding: 3rem 2rem; margin: 0rem 0 0 0}
.custom-checkbox {margin-bottom: 1rem;}
.custom-checkbox input[type="checkbox"] {width: 30px; height: 30px;}
.custom-checkbox .form-check-label {padding-left: 10px; font-size: 1.2rem; line-height: 40px;}

.custom-radio {margin-bottom: 1rem;position:relative;}
.custom-radio input[type="radio"] {width: 30px; height: 30px; position:absolute; top:5px;}
.custom-radio .form-radio-label {padding-left: 50px; font-size: 1.2rem; line-height: 40px;}


.arrow__navigation {border-top: 1px solid #d9dde5; border-bottom: 1px solid #d9dde5;}
.btn-back, .btn-next {padding:12px 20px}

.dotts__navigation  {background-color: #f7f7f7; padding: 2rem; position: relative;}

.dotts__navigation li {display:inline-block; padding-left:3px; padding-bottom:1rem}
.dotts__navigation .dott {display:block; border-radius: 100%; width:35px; height: 35px; text-align: center; font-weight: bold; line-height:35px}
.dotts__navigation .dott:hover {opacity: .7;}
.dotts__navigation .number {background-color: #d9d9d9; color: #969696}
.dotts__navigation .read {background-color: #65a735;  color: #fff; }
.dotts__navigation .quest {background-color: #d9d9d9; color: #969696}
.dotts__navigation .fail {background-color: #f0a7a6; color: #ed5653; }
.dotts__navigation .pass {background-color: #65a735; color: #fff; }
.dotts__navigation .active {background-color: #1853a0; color: #fff}

.dotts__navigation .overflow-auto {white-space: nowrap;}
.dotts__navigation .gradient_right {position: absolute;top: 0; right: 0; height: 100%;width: 5rem;background: linear-gradient(to left, #f7f7f7, rgba(247, 247, 247, 0)); pointer-events: none; }
.dotts__navigation .gradient_left {position: absolute;top: 0; left: 0; height: 100%;width: 5rem;background: linear-gradient(to right, #f7f7f7, rgba(247, 247, 247, 0)); pointer-events: none; }

.module__readings {padding:3rem 2rem}
.module__readings h2 {font-size:1.5rem; margin-bottom: 2rem;}
.module__readings .foto {width: 300px; height: 400px; float:right; margin:0 0 2rem 2rem; border:1px solid #d9dde5}
.module__readings p {margin-bottom:1.8rem}

.module__objective {background-color: #f7f7f7;padding: 3rem 2rem;margin: 2rem 0 0 0; text-align: center;}
.module__objective h2 {font-size:1.5rem; margin-bottom: 0;}
.module__objective p {font-size: 1.2rem;}

.module__rights {background-color: #f7f7f7;padding: 3rem 2rem;margin: 2rem 0 0 0; }

.dashboard h2 {font-size:1.5rem}
.dashboard h3 {font-size:1.2rem}
.dashboard .padding-right {margin-right: 2rem;}
.dashboard .padding {padding:1.5rem 7rem 1.5rem 7rem}
.dashboard .photobg {width:100px; height: 100px; border-radius: 100%;}
.dashboard img {width:100px}


.photo__certificate {background-color: #fbb3ab; }
.photo__certificate p {margin:0}
.photo__certificate a:hover {opacity: .6; color: black}

.training__dashboard {background-color: #ffdfc0; padding:1.5rem 2rem}
.training__dashboard a {padding:10px 25px; background-color: white; border-radius: 5px; font-weight: bold; margin:.5rem .5rem 0 0; display: block;}
.training__dashboard a:hover {background-color: #fd9219; color: white}

.blended__dashboard {background-color: #fff0de; padding-bottom: 3rem !important;}
.blended__dashboard .ico {width: 100px;}
.blended__dashboard .start a{display:block; padding:10px 25px; background-color: white; border-radius: 5px; font-weight: bold;}
.blended__dashboard .passed a{display:block; padding:10px 25px; background-color: #6ca341; color: white; border-radius: 5px; font-weight: bold; cursor:text}
.blended__dashboard .borderbottom {border-bottom:1px solid black; padding-bottom:2rem; margin-bottom: 1rem;}
.blended__dashboard .start a:hover {background-color: #fd9219; color: white}


.btn-question-answered {background-color:#0E64A7 !important; color:white;}
.btn-question-correct {background-color:#57B233 !important; color:white;}
.btn-question-returned {background-color:#d6a317 !important; color:white;}


@media (min-width : 1500px) {
     html {font-size:105%}


}


@media (max-width: 1199px){
     .menu-expand-lg .menu-menu .menu-link {margin:0 11px}
     .container {max-width:100%;--bs-gutter-x:2.5rem}    

     
}

@media (max-width: 1100px) {
    .container {max-width:100%}   
    .login__content h1 { font-size: 1.7rem}
    .login__content .fs-5 { font-size: 1rem !important}
    .training__complet .btn {zoom: 0.8; transform: scale(0.8);}
    
}

@media (max-width: 992px) {
    main {padding:1rem;}
    body,html {background-color: white;}
    .container__g0 {--bs-gutter-x:0rem}   
    header .ms-auto {margin: 0 !important;}
    .radius40 {border-radius: 0;}

    .menu ul {margin-top: 1rem;}
    .login__main {margin:0}
    .login__main .bg__image {background-image: none; background-color: rgba(255, 255, 255, 0.87);}
    .logo img {height: 50px;}
    .login__content {margin: 0;}
    .login__content main {position: relative; z-index: 2;;}
    .flex-fill-nomobile{display:none}
    .login__content form {margin-top:2rem; padding:0 }
    .login__content h1 { font-size: 1.8rem; margin: 3rem 0 1rem 0;}
    .login__content h1 span {display: block; font-size: 3rem; line-height: 3.3rem;}
    .login__image__mobile {background-image: url(/images/login.webp); background-repeat: no-repeat; width:100%; height: 400px; position: fixed; bottom:0; left:0; opacity: .2; background-size: cover; z-index: 1;}
    .certificate__main header.d-flex {    flex-direction: column;}
    .certificate__main {margin:0 auto}

    .certificate__content form {padding:0 2rem}
    .certificate__detail {padding:0}
    .certificate__detail .foto {position: relative; top:0; left:0; right: auto; width: 100%; height: 300px; background-position: center center; margin-bottom: 2rem;}
    .certificate__detail h1 {text-align: center; font-size: 1.7rem;}
    .certificate__detail .box  {padding:2rem; text-align: center;}
    .certificate__detail .width {width: auto;}
    .certificate__detail .strong {font-size: 1.1rem;}
    .certificate__detail .box .d-flex {flex-direction: column !important; margin-top:1.5rem !important}

    .certificate__download {padding:2rem 1rem; zoom: 0.8; transform: scale(0.8); text-align: center;}
    .modal-content form {margin:.5rem}
    .modal-content form p {font-size:1rem !important}
    .modal-content h1 {font-size: 1.6rem;}
    
    .welcome {display: none;}
    .welcome_name {display: inline-block;}
    .cardcontainer {border-radius: 0;}
    .download__your_cert .certificate__download {zoom:100%}
    .cardcontainer .close {position: absolute; font-size: 2rem; top:-22px; right:15px;}
    .breadcrumb {zoom:90%; padding-left:1rem; opacity: .6; margin:0}
    .modul__video {padding:1rem 1rem 0 1rem}
    .training__complet img {margin-top:2rem}
    .modul__trainings {padding-left: 1rem; padding-right: 1rem;}

    .training__complet .btn {zoom:100%}
    .module__alert .ico {width:70px; top:-2rem}
    .module__alert.celebration .ico {width:100px; top:-2rem}

    .questions, .arrow__navigation, .notpass_btn {zoom: 0.8}
    .module__questions h2 {font-size: 1.2rem;}
    .pages {border-top: 1px solid #d9dde5; border-bottom: 1px solid #d9dde5; background-color: #f7f7f7; color: #969696; padding:5px 15px; right:0; top:0; position: relative; text-align: center; opacity:1;}

    .module__readings .foto {width: 100%; height: 400px; float:none; margin:2rem 0}
    .module__objective p {font-size: 1rem;}

    .dashboard .padding {padding:1.5rem}
    .training__dashboard .modul div { text-align: center;}
    
   .photo__certificate .nophoto {display:none;}
    
}


@media (max-width: 533px) {
    .btn-danger, .modal-content .btn {padding:10px 25px}
.blended__dashboard  .ms-auto {margin: 0 !important;}
.blended__dashboard .start {width: 100%; text-align: center; margin-bottom:15px}
.blended__dashboard .passed {width: 100%; text-align: center;}
.photo__certificate .d-flex {    flex-direction: column;}
.dashboard .photo {width:100%; height: 200px; margin-bottom:2rem}
.dashboard .photobg {width:100%; height: 100%; border-radius: 0; background-position: center ;}
.dashboard .ico {display:none}
.dashboard .padding-right {margin-right: 0;}
}



.overflow-auto::-webkit-scrollbar {width: 5px; height: 5px;}
.overflow-auto::-webkit-scrollbar-track {background-color: #d9dde57b; }
.overflow-auto::-webkit-scrollbar-thumb {background-color: #bec4d0;border-radius: 6px}
.overflow-auto::-webkit-scrollbar-thumb:hover {background-color: #bec4d0;}