:root
{
 --color-blue-primary:     #2D3786;
 --color-red-primary:      #B62936;
 --color-yellow-primary:   #FECA01;

 --color-gray-0-secondary: #e5e6e4;
 --color-gray-1-secondary: #F0F1F1;
 --color-gray-2-secondary: #ABABAB;
 --color-gray-3-secondary: #EAECF0;
 --color-gray-4-secondary: #f2f2f2;
 --color-gray-5-secondary: #667085;

 --color-blue-1-secondary: #97CCF2;
 --color-blue-2-secondary: #65B8F2;

 --color-yellow-light-1:    #EFEFD0;
 --color-yellow-light-2:    #FFD166;

 --color-cyan-1:            #06D6A0;
 --color-pink-1:            #EF476F;

 --color-red-secondary:     #f5d1dd;

 --color-soso-finish:       #f7e6a1;
 --color-good-finish:       #8fdac6;
 --color-selected:          #E0F0FF;
}

/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  F O N T                                                       */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

/* @font-face 
{
 font-family: "nunito-regular";
 src: url("../../resources/fonts/NunitoSans_7pt-Regular.ttf") format("opentype");
}

@font-face 
{
 font-family: "nunito-semibold";
 src: url("../../resources/fonts/NunitoSans_7pt_SemiCondensed-Bold.ttf") format("opentype");
}

@font-face 
{
 font-family: "nunito-bold";
 src: url("../../resources/fonts/NunitoSans_7pt-ExtraBold.ttf") format("woff2");
} */
/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  F O R M  I N P U T                                            */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

.input-text {
    width: 100%;
    height: 60px;
    background-color: var(--color-gray-1-secondary);
    border: 1px solid var(--color-gray-2-secondary);
    font-size: 1.125rem;
    line-height: 24px;
    color: var(--color-black);
}

.select-date {
    font-family: "nunito-bold";
    font-size: 1rem;
    line-height: 22px;
    color: var(--color-white);
    background-color: var(--color-red-primary);
    border-radius: 8px;
    padding: 10px 20px;
}

.select-date > select {
    color: var(--color-white);
    border: none;
    background: var(--color-red-primary);
    margin-left: 20px;
}

/* Run only safari */
_::-webkit-full-page-media, _:future, :root .select-date > select {
    -webkit-appearance: none;
    background: transparent;
    background-image:url('/resources/images/arrow-right-white.png');
    background-position : right center;
    background-repeat: no-repeat;
    padding-right: 1.5em;
}

.button-action-medium {
    font-family: "nunito-bold";
    font-size: 1rem;
    line-height: 22px;
    color: var(--color-white);
    min-width: 96px; 
    letter-spacing: 2px; 
    font-weight: bold; 
    background-color: var(--color-red-primary); 
    color: var(--color-white);
}

.select-option-custom {
    width: 100%;
    height: 60px;
    background-color: white;
    border: 1px solid var(--color-gray-2-secondary);
    font-size: 1.125rem;
    line-height: 24px;
    color: var(--color-black);
    padding: 0px 20px;
}

/* Run only safari */
_::-webkit-full-page-media, _:future, :root .select-option-custom {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-appearance: none;
    background-color: white;
    background-image:url('/resources/images/arrow-right.png');
    background-position : right center;
    background-repeat: no-repeat;
    padding-right: 20px;
}

/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  B U T T O N                                                   */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

/* .button-authentication {
    width: 100%;
    height: 48px;
    background-color: var(--color-red-primary);
    font-family: "nunito-semibold";
    font-size: 1.125rem;
    line-height: 24px;
    font-weight: bold;
    color: var(--color-white);
}

.button-sslogin {
    width: 100%;
    height: 48px;
    background-color: var(--color-gray-1-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-gray-2-secondary);
    font-family: "nunito-semibold";
    font-size: 1.125rem;
    line-height: 24px;
    font-weight: bold;
    color: var(--color-black);
}

.button-action-save {
    height: 48px;
    background-color: var(--color-red-primary);
    font-family: "nunito-semibold";
    font-size: 1.125rem;
    line-height: 24px;
    font-weight: bold;
    color: var(--color-white);
} */

/* Group button fullscreen and download */

/* .group-button-screen {
    position: absolute;
    right: 20px;
    top: 16px;
    z-index: 1;
}

.group-button-screen .button-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-button-screen .button-circle:hover, .group-button-screen .button-circle.button-circle-active {
    background-color: var(--color-red-primary);
    transition: all 0.33s ease-in-out;
}

.group-button-screen .button-circle:hover > i {
    color: var(--color-white);
}

.group-button-screen .button-circle > i {
    font-size: 1.5rem;
    line-height: 32px;
    color: var(--color-blue-primary);
} */

.group-button-tool {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* .installation-app {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-blue-primary);
}

.installation-app:hover {
    background-color: var(--color-white);
    border: 5px solid var(--color-white);
    transition: all 0.33s ease-in-out;
} */

.button-guide {
    position: relative;
    align-items: center; 
    width: 60px;
    height: 60px; 
    background-color: white; 
    border-radius: 100px;
    border: 5px solid #B62936;
    cursor: pointer;
    z-index: 1000;
}

.button-guide:hover {
    background-color: var(--color-white);
    border: 5px solid var(--color-white);
    transition: all 0.33s ease-in-out;
}

.button-guide .fa-icon-guilde {
    background-color: #B62936; 
    border-radius: 100px; 
    width: 22px; 
    height: 22px; 
    text-align: center; 
    align-content: center; 
    justify-content: center;
    position: absolute; 
    bottom: 0px; 
    right: -3px; 
    color: white;
}


/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  P O P U P S T Y L E                                            */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

.popup-success {
    width: 384px;
    user-select: none; 
    align-items: center; 
    background-color: var(--color-white);
    padding: 20px;
}

.popup-success .popup-success-content {
    font-family: "nunito-bold";
    font-size: 1.125rem;
    line-height: 24px;
    font-weight: bold;
    color: var(--color-cyan-1);
}

/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  T A B L E C U S T O M                                         */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

/* .table-custom {
    border-radius: 20px;
}

.table-custom tr {
    border-bottom: 1px solid;
}

.table-custom tr.table-standard-row:nth-of-type(odd),
.table-custom tr.table-standard-cell:nth-of-type(odd) {
    background-color: var(--color-gray-3-secondary) !important;
}

.table-custom tr td {
    font-family: "nunito-regular";
    font-size: 1.125rem;
    line-height: 22px;
    text-align: left;
    padding: 10px 8px !important;
}

.table-custom tr td > input {
    font-family: "nunito-regular";
    font-size: 1.125rem;
    line-height: 22px;
    border: 1px solid var(--color-gray);
} */

.activities-vocabulary-image {
  width: 352px;
  height: 352px;
}

.activities-vocabulary-item{
  width:480px; 
  height:96px;
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  .activities-vocabulary-image {
    width: inherit;
    height: inherit;
  }
  .activities-vocabulary-item{
    width:100%; 
    height:inherit;
  }
}


.advertisement-close
{
  align-self: flex-end;
  background: var(--color-red-primary);
  height: 35px;
  width: 35px;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  color: white;
  cursor: pointer;
}