:root {
    --Primary:#644623;

    --NeutralsDark:#1A0F05;

    --Secondary: #68811F;



    --BluePrimary: #00A5E3;
    --GrayPrimary: #757575;
    --GreenPrimary: #CBDB2A;
    --RedPrimary: #C51630;
    --GreenCorrect:  #128B26;
    --warningPrimary: #D99D19;

    --BlueNeutro:#1F82C5;


    --minWidthLandscape: 1024px;
    /*--maxWidthLandscape: 1080px;*/
    --maxWidthLandscape: 1400px;
    --minHeightLandscape: 610px;
    --maxHeightLandscape: 992px;

    --PurplePrimary: #99167E;
    --FluorescentPrimary: #B7D432;
    --LilacPrimary: rgba(153, 22, 126, 0.35);
}

@font-face {
    font-family: Myryad Regular;
    src: url('/fonts/myriadpro/MYRIADPRO-REGULAR.OTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: MontserratBold;
    src: url('/fonts/Montserrat/Montserrat-Bold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Montserrat ExtraBold;
    src: url('/fonts/Montserrat/Montserrat-ExtraBold.ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: Montserrat ExtraLight;
    src: url('/fonts/Montserrat/Montserrat-ExtraLight.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: Montserrat Light;
    src: url('/fonts/Montserrat/Montserrat-Light.ttf');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: Montserrat Medium;
    src: url('/fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Montserrat Regular;
    src: url('/fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Montserrat SemiBold;
    src: url('/fonts/Montserrat/Montserrat-SemiBold.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Montserrat Thin;
    src: url('/fonts/Montserrat/Montserrat-Thin.ttf');
    font-weight: normal;
    font-style: normal;
}

 
@font-face {
    font-family: Ubuntu Bold;
    src: url('/fonts/ubuntu/Ubuntu-Bold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Ubuntu Light;
    src: url('/fonts/ubutu/Ubuntu-Light.ttf');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: Ubuntu Medium;
    src: url('/fonts/ubuntu/Ubuntu-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Ubuntu Regular;
    src: url('/fonts/ubuntu/Ubuntu-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}


body{
    font-family: Ubuntu Regular;
}
input{
    background-color: transparent;
    border:none;
    border-bottom:6px solid var(--Secondary);
    color: var(--NeutralsDark);
    font-size:24px;
    margin: 0 auto;
    padding:10px;
    text-align: center;
    transition:0.2s ease all; 
    width:95%;
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.text-Dark{
    color: var(--NeutralsDark);
}
input:focus{ 
    outline:none; 
    width: 100%;
}

input,label,span{
    font-family: Montserrat Regular;

    transition:0.5s ease all; 
       
    -moz-transition:0.5s ease all; 
    -webkit-transition:0.5s ease all;
}

label{
    font-size: 18px;
}

li{
    color: var(--GrayPrimary);
    font-family: Montserrat Regular;
    font-size: 20px;
}


/*#diagnosis-description-container{
    min-height: 160px;
}*/

#diagnosis-status-description-modal{
    font-size: 2rem;
    line-height: 34px;
    font-family: Ubuntu Bold;
    font-weight: 900;
    color: var(--NeutralsDark);
}

#diagnosis-status-description-modalImage{
    font-size: 1.5rem;
    line-height: 34px;
    font-family: Ubuntu Bold;
    font-weight: 900;
    color: var(--NeutralsDark);
}

#document-image-container{
    transition: all 1s ease;
}

#error-description-container span{
    color: var(--GrayPrimary);
    font-size: 25px;
    font-weight: 500;
}

#option-title-modal{
    color: var(--NeutralsDark);
    font-size: 35px;
    font-weight: 600;
    font-family: Ubuntu Medium;
}

#stage-description{
    color: var(--NeutralsDark);
    font-size: 16px;
    text-align: center;
    font-family: Montserrat Regular;
}

#stage-diagnosis-image-modal{
    width: 70%;
}

#stage-image-modal{
    width: 138px;
    height: 138px;
}

#stage-title-modal{
    color: var(--NeutralsDark);
    font-size: 32px;
    font-weight: 600;
}
#stage-title-modal-1{
    color: var(--NeutralsDark);
    font-size: 32px;
    font-weight: 600;

}

#stage1-modal-image{   
    bottom: 0;
    left: 40px;
    position: absolute;
    width: 34%;
}

.background-col{
    background-image: url('/images/Marco_Limpio.png');
    background-size: 100% 100%;
}
.background-fondo{
    background-image: url('/images/fondo.png');
    background-size: 100% 100%;
    /*z-index: 1;*/
}
.background-colhome{
    background-color: var(--PurplePrimary);
    height: 50vh;
}
.background-image{
    bottom: 0;
    height: 100%;
    position: absolute;
    z-index: -1;
}

.base-button{
    background-color: var(--Primary);
    border: none;
    color: white;
    font-family: Ubuntu Medium;
    font-size:20px;
    padding: 8px;
    min-width: 240px;
    border-radius: 8px;
}

.base-button.button-ghost{
    background-color: var(--Primary); 
    border: 3px solid var(--Primary);
    color: white;
    width: 50%;
    font-size: 18px;
    font-weight: 700;
}

.base-top{
    /*background-color: var(--GreenPrimary);*/
    /*background-color: transparent;*/
    height: 50px;
    position: absolute;
    right: 0;
    top: 0px;
    /*width: 700px;*/
    z-index: 1;
    color: #FFFFFF;
}
.base-top-moderador{
    /*background-color: var(--GreenPrimary);*/
    /*background-color: transparent;*/
    height: 50px;
    position: absolute;
    right: 29px;
    top: 0px;
    /*width: 700px;*/
    z-index: 1;
}

.base-parent-container{
    min-height: 100vh;
    min-width: 100vw;
}

.bgd-primary{
    background-color: var(--Primary);
}

.cancel{
    background-color: #FFFFFF;
    border: 3px solid var(--Primary);
    color: var(--Primary);

}

.complete_buttonreturn{
    background-color: var(--Primary);
    color: #FBFDFF;
    border: 3px solid var(--Primary);
}

.diagnosis-modal-title{
    font-size: 1.25rem;
    line-height: 30px;
    font-weight: 500;
    color: var(--NeutralsDark);
}

.error-description{
    color: var(--Primary);
    font-weight: bold;
    font-size: 1.2em;
}
    

.footer{
    bottom: 0;
    position:fixed!important; 
}

.footer-nav{
   background-color: var(--GrayPrimary);
   border-top-right-radius: 65px; 
   color: white;
   padding: 16px 64px 16px 48px;
}

.footer-nav span{
    font-family: Montserrat Regular;
    margin-left: 32px;
}

.footer-nav span:first-child{
    margin-left:0px;
}

.footer-span{
    color: white;
}

.full-parent{
    min-height: 100vh;
    min-width: 100vw;
}

.heartbeating{
    animation: heartbeat 1s infinite;
     -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}

.instructions-span{
    font-family: Ubuntu Medium;
    font-size: 1.25rem;
    color: var(--NeutralsDark);
}

.legend-modal-text{
    color: black;
    font-size: 12px;
    width: 100%;
    display: block;
    text-align: end;
    display: none;
}

.logo-escape-top{
    left: 4%;
    width: 3%;
    position: absolute;
    top: 3%;
    /*width: 10%;*/
    /* width: 15%; */
}
.logo-escape-top-rigth{
    right: 32px;
    max-width: 100%;
    position: absolute;
    top: 20px;
    /*width: 10%;*/
    width: 9%;
}

.logo-forxiga-footer{
    margin-right: 16px;
    max-height: 93px;
    max-width: 120px;
    margin-bottom: 16px;
}

.menu-state-description{
    font-size: 30px;
    font-style: normal;
    line-height: 36px;
}

.menu-state-circle{
    border-radius: 50%;
    height: 130px;
    min-height: 130px;
    min-width: 130px;
    width: 130px;
}

.modal-backdrop.show {
    opacity: 0;
}

.modal-body{
    box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
}

.modal-content{
    /*border-radius: 48px;*/
}

.not-visible {
    opacity: 0 !important;
}

.pulse{
    cursor: pointer;
    box-shadow: 0 0 0 rgba(57,142,174, 0.7);
    animation: pulse 2s infinite;
}
.pulse:hover {
    animation: none;
}

.return-container{
    transition:all .5s linear;
    transform-origin: center;
    z-index: 1;    
}

/*
.return-container-lg{
    bottom: 40%;
    cursor: pointer;
    left: 0%;
    position: absolute;
    z-index: 3;
}
*/
.return-container-lg{
    cursor: pointer;
    left: 35%;
    bottom: 15%;
}

.return-image{
    max-height: 65px;
    max-width: 65px;
    min-height: 65px;
    min-width: 65px;
    transition:0.5s ease all; 
    -moz-transition:0.5s ease all; 
    -webkit-transition:0.5s ease all;
}

.return-legend{
    color: var(--RedPrimary);
    font-size: 18px;
}

.rotate {
  transform:rotateX(-90deg);
}

.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.stage-image{
    width: 70%;
}

.stage-image-circle{
    align-items: center;
    background-color: white;
    border: 3px solid var(--BluePrimary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    margin-left: -50px;
    max-height: 80px;
    max-width: 80px;
    min-height: 80px;
    min-width: 80px;
    position: relative;
    z-index: 1;
    
}

/*.stage-circle-diagnosis-container{
    align-items: center;
    background-color: white;
    border: 3px solid var(--BluePrimary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    max-height: 80px;
    max-width: 80px;
    min-height: 80px;
    min-width: 80px;
    position: relative;
    z-index: 1;
}*/

.diagnosis-status-image-modal{
    width: 138px;
    height: 138px;
}

.stage-circle-intro-container{
    align-items: center;
    background-color: white;
    /*border: 3px solid var(--BluePrimary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    max-height: 100px;
    max-width: 100px;
    min-height: 100px;
    min-width: 100px;
    position: relative;
    z-index: 1;*/
}

.title{
    color: white;
    font-size: 20px;
}

.title-container{
    background-color: var(--BluePrimary);
    border-bottom-right-radius: 20px;
    margin-left: -20px;
    padding: 8px 16px 8px 32px;
    margin-bottom: 6px;
}

.visible {
    opacity: 1 !important;
}

.zooming{
    animation: zoominoutsinglefeatured 3s infinite ;
}

/*Top*/
.base-button.link-top-button{
    font-size:14px;
    min-width: 160px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.base-button.link-top-button.disabled{
    background-color: #C9C8C8;
    color: #8E8D8D;
}

.calculator-button-top{
    margin-left: -30px;
    text-align: end;
}

.group-image-top{
    border-radius: 50%;
    max-height: 50px;
    max-width: 50px;
    min-height: 50px;
    min-width: 50px;
    transition: all 1s ease;
}

.home-image-top{
    height: 16px;
}

.home-span-top{
    color: white !important;
}

.icon-circle{
    background-color: white;
    border: 1px solid var(--GrayPrimary);
    border-radius: 50%;
    min-height: 42px;
    min-width: 42px;
    position: relative;
    z-index: 1;
}

.icon-image{
    height: 30px;
}

.return-top{
    background-color: var(--RedPrimary);
    border-radius: 20px;
    cursor: pointer;
    padding-bottom: 2px;
    padding-right: 8px;
    padding-top: 2px
}

.return-top:hover{
    border: 1px solid var(--BluePrimary);
    transform: scale(1.1);
}

.return-top.complete{
    background-color: var(--GreenPrimary);
    border: 1px solid white;
}

.team-name-top{
    color: var(--GrayPrimary);
    max-height: 50px;
    max-width: 158px;
    /*min-width: 158px;*/
}

.time-sm{
    display: block;
    font-size: 20px;
    margin-top: 1rem;
    text-align: center;
}
/*Top*/

/*questions*/

.questions-container{
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--BluePrimary)  #fafafa;
    transition: all 1s ease;
}

/* Tamaño del scroll */
.container::-webkit-scrollbar {
  width: 15px;
}

/* Works on Chrome, Edge, and Safari */
.questions-container::-webkit-scrollbar {
  width: 15px;
}

.questions-container::-webkit-scrollbar-track {
  background: #fafafa;
}

.questions-container::-webkit-scrollbar-thumb {
  background-color: var(--BluePrimary);
  border-radius: 4px;
  border: 5px solid #fafafa;
}

.options-container{
    transition: all 1s ease;
}

.answer-container,
.text-container{
    /*background-color: var(--BluePrimary);*/
    /*border-bottom-right-radius: 40px;*/
    border-radius: 4px;
    color: var(--NeutralsDark);
    cursor: pointer;
    min-width: 200px;
    padding: 0px 30px 0px 30px;
    width: 100%;
    border: 4px solid var(--Primary);
    /*z-index: -1;*/
    min-height: 150px;
    display: grid;
    align-items: center;
}

.img-container{
    border-radius: 10px;
    cursor: pointer;
    min-width: 200px;
    padding: 0px 50px 0px 50px;
    border: 3px solid var(--PurplePrimary);
    /*z-index: -1;*/
    min-height: 150px;
    display: flex;
    align-items: center;
}

.text-question{
    color: var(--NeutralsDark);
    font-size: 1.25rem;
    font-weight: 900;
    font-family: Ubuntu Medium;
}

.unlocked{
    background: var(--BluePrimary);
}

.complete{
    /*background: var(--GreenPrimary);*/
    /*color: black;*/
    
    color: #FBFDFF;
    border: 3px solid var(--GreenCorrect);
    background-color: var(--GreenCorrect);
}
.complete > .text-question{
    color: white;
}

.locked{
    background: var(--GrayPrimary);
    opacity: 0.2;
}

.option-error{
    /*background: var(--RedPrimary);*/
    color: #FBFDFF;
    border: 4px solid var(--RedPrimary);
    background-color: var(--RedPrimary);
}
#diagnosis-status-image-modal{
    width: 30%;
}

.option-neutro{
    color: #FBFDFF;
    border: 4px solid var(--BlueNeutro);
    background-color: var(--BlueNeutro);
}
.option-neutro > .text-question{
    color: white;
}

.option-error > .text-question{
    color: white;
}
.sphere-error{
    /*background: rgb(233,0,0);
    background: radial-gradient(circle, rgba(233,0,0,1) 0%, rgba(115,13,12,1) 54%);*/
    background: #e90000;
    background: -webkit-radial-gradient(center, #e90000, #730d0c);
    background: -moz-radial-gradient(center, #e90000, #730d0c);
    background: radial-gradient(ellipse at center, #e90000, #730d0c);
    box-shadow: inset -4px -4px 4px 0px rgba(255,255,255,0.3);
}

/*questions*/


/*pdf*/

.pdf-render{
    display: block;
    /*height: 36vw;*/
    height: 60vh;
    width: 80%; 
}

/*.pdf-title-container{
    width: 100%;
}*/

/*pdf*/

.logo_mon_login {
  height: 2rem;
  margin-top: 2rem;
}
.logo_thea_login {
    height: 2.8rem;
    margin-top: 0.8rem;
}
.video-container{
    height: 79vh;
}
.titulo-header{
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
}
.title-head{
    color: #FBFDFF;
    font-weight: 600;
    font-size: 32px;
    line-height: 34px;
    font-family: Ubuntu Bold;
}
.title-head-video{
    color: var(--NeutralsDark);
    /* font-weight: 600; */
    font-family: Ubuntu Medium;
    font-size: 1.25rem;
    line-height: 34px;

}
.logo-circle-header
{
  position: absolute;
  top: 3.5rem;
  right:4rem;
  z-index: 1;
  max-width: 6.264rem;
}
.logo-tree-footer{
    position: absolute;
    bottom: 2.5rem;
    left: 2.4rem;
    max-width: 9.013rem;
	opacity: 20%;
}
.status-complete{
	border: var(--GreenCorrect) 4px solid;
	border-radius: 8px;
}
.status-pendiente{
	border: var(--warningPrimary) 4px solid;
	border-radius: 8px;
}

.stage-status-image
{
	height: 30px;
	width: 30px; 
}

.stage-status-container
{
	padding: 15px;
	position: absolute;
	right: 0rem;
	top: -16px;
}
.img-modalCIN{
    width: 2.5rem;
}
.imgModal{
    width: 40rem;
}

.fuente{
    font-family: Ubuntu Bold;
}

.title-head-document{
    font-size: 1.25rem;
    font-family: Ubuntu Medium;
}
@media (max-width: 1280px) {
    #stage-description {
        font-size: 19px;
    }
    .titulo-header {
        top: 2rem;
    }
    .logo-escape-top {
        top: 3%;
    }
}

@media (max-width: 1180px) {
    .logo-circle-header
    {
      top: 4rem;
      right:4rem;
      z-index: 0;
      max-width: 6.264rem;
    }
    
    .logo-tree-footer{
        position: absolute;
        bottom: 2.5rem;
        left: 2.4rem;
        max-width: 9.013rem;
        opacity: 20%;
    }

    .m-top-login{
        margin-top: 4rem;
    }
    
    .base-top-moderador{
        right: 27px;
        top: 100px;
    }
    .text-container{
        padding-left: 15px;
        padding-right: 15px;
    }
    .img-container{
        padding: 0px 28px 0px 28px;
    }
}
@media (max-width: 1024px) {
    .logo-circle-header
    {
      top: 4rem;
      right:4rem;
      z-index: 1;
      max-width: 6.264rem;
    }
    .logo-tree-footer {
        position: absolute;
        bottom: 2.5rem;
        left: 1.9rem;
        max-width: 9.013rem;
        opacity: 20%;
    }

}
@media (max-width: 992px) {
    .m-top-login{
        margin-top: 0rem;
    }
    .return-container-lg {
        left: 35%;
    }
}    
@-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(57,142,174, 0.7);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(57,142,174, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(57,142,174, 0);
    }
}

@keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(57,142,174, 0.7);
      box-shadow: 0 0 0 0 rgba(57,142,174, 0.7);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(57,142,174, 0);
        box-shadow: 0 0 0 10px rgba(57,142,174, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(57,142,174, 0);
        box-shadow: 0 0 0 0 rgba(57,142,174, 0);
    }
}


@keyframes shake {           
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.05,1.05);
    }
    100% {
        transform: scale(1,1);
    }
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}


@keyframes shrink {
  from {
    width: 100%;
    height: 100%;
  }
  to {
    width: 50%;
    height: 50%;
  }
}

@keyframes grow {
  from {
    width: 0%;
    height: 0%;
  }
  to {
    width: 50%;
    height: 50%;
  }
}
@media (max-width: 1080px) {
    .background-colhome{
        background-color: var(--PurplePrimary);
        height: 61vh;
    }
    .video-container{
        height: 65vh;
    }
}
@media (max-width: 992px) {
    .background-colhome{
        background-color: var(--PurplePrimary);
        height: 73vh;
    }
}
/*mobile*/
@media (min-width: 992px) {
    /*.questions-container{
        max-height: 47vh;
    }*/
/*
    .video-container{
        height: 60vh;
    }
    */
}


@media (max-width: 992px) {

    #stage1-modal-image{
        z-index: -1;
    }

    .base-top {
        background-color: var(--GreenPrimary);
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 10;
    }

    .group-image-top {
        max-height: 42px;
        max-width: 42px;
        min-height: 42px;
        min-width: 42px;
    }

    .logo-escape-top {
        width: 19%;
    }

    .logo-escape-top-rigth{
        width: 10%;
    }

    .answer-container,
    .text-container{
        min-height: 100px;
    }

    .menu-state-circle {
        height: 100px;
        min-height: 100px;
        min-width: 100px;
        width: 100px;
    }

    .menu-state-description {
        font-size: 22px;
        line-height: 28px;
    }


    .title{
        font-size: 30px;
    }

    .title-container .title{
        font-size: 16px;
    }

    .vh-100{
        height: auto!important;
        min-height: 100vh;
    }

    .vw-100{
        width: auto!important;
    }
    .base-top-moderador{
        top: 130px;
    }
}
@media (max-width: 810px){
    .m-bottom-login{
        margin-bottom: -15rem;
    }
}

/*sm*/
@media (max-width: 576px){
    .base-button.link-top-button {
        font-size: 11px;
        min-width: 100px;
    }

    .calculator-button-top{
        margin-left: 0px;
        text-align: center;
    }

    .home-span-top{
        border-radius: 20px;
        font-size: 11px;
        padding: 0px;
    }
}




/*landscape*/
/*
@media only screen and  (min-width: 1024px) and  (max-width: 1080px) and (min-height: 610px) and (max-height: 992px) {*/
@media only screen and  (min-width: 1024px) and  (max-width: 1400px) and (min-height: 610px) and (max-height: 992px){
    .footer{
        position:relative; 
    }

    .logo-forxiga-footer{
        margin-bottom: 8px;
        margin-right: 8px;
        /*max-height: 73px;*/
        max-height: 80px;
    }

    .sphere-container{
        height: 75px;
        width: 75px;
    }

    .text-container{
        padding-bottom: 8px;
        padding-top: 8px;
    }

    .img-container{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .text-question{
        font-size: 18px;
    }

    .title{
        font-size: 16px;
    }
}



/* estilos stage one
    position: absolute;
    width: 33%;
    bottom: 0;
    height: 75%;
    left: 7%;
*/



/*input move lavel top animation style*/
    /*.group{ 
        position:relative; 
        margin-bottom:45px; 
    }

    input{
        background-color: transparent;
        font-size:24px;
        padding:10px 10px 10px 5px;
        display:block;
        width:95%;
        border:none;
        border-bottom:3px solid #000;
        margin: 0 auto;
        text-align: center;
    }
    
    input:focus{ 
        outline:none; 
    }*/
    /*normal level*/
    /*
    label{
        color:black; 
        font-size:18px;
        position:absolute; 
        left:5px;
        pointer-events:none; 
        top:10px;
        transition:0.2s ease all; 
        width: 95%;
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }*/

    /* active state */
    /* "~"" makes reference to the nearest tag  */
    /*move up label when input is active, neeed rquiered at input tag tochange status*/
   /* input:focus ~ label, input:valid ~ label{
        top:-20px;
        font-size:18px;
        color:#000;
        
    }

    .bar{
        position:relative; 
        display:block; 
        width:100%; 
    }
    .bar:before, .bar:after{
        content:'';
        height:3px; 
        width:0;
        bottom:0px; 
        position:absolute;
        background:#000; 
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
    .bar:before {
        left:50%;
    }
    .bar:after {
        right:50%; 
    }*/

      /* active state */
   /* input:focus ~ .bar:before, input:focus ~ .bar:after {
        width:50%;
    }*/
    
.alert-img{
    width: 138px;
    height: 138px;
}
.list-group-item{
    color: var(--GrayPrimary);
}