:root {
  --dark-blue: #152329;
  --light-blue: #e0f2f2;
  --dark-green: #0c6950;
  --medium-green: #2d8e87;
  --light-green: #37afa9;
  --dark-gray: #0e0e0e;
  --medium-gray: #778a8a;
  --medium-purple: #5514a4;

  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

  font-family: 'Roboto', sans-serif;

}

html {
  /*height: 100%;*/
}


body {
  padding: 0px;
  margin: 0px;
  background-color: var(--light-green);
  /*min-height: calc(100% + 120px);
  position: relative;*/
  /*height: 100%;*/

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1);
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    -webkit-border-radius: 0ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0.1);
}


a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
}

input,select,textarea {
  border-radius: 8px;
  height: 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 2px solid var(--light-green);
  padding-left: 10px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);;
}

input,select,textarea:focus {
  border: 2px solid var(--light-green);
  outline: none;
}

select {
  border-radius: 8px;
  height: 32px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 2px solid var(--light-green);
  padding-left: 10px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);;
}

label {
  display: block;
  width: 80%;
  margin: 10px auto;
  text-align: left;
  margin-bottom: 0px;
  font-weight: bold;
  color: var(--light-blue);
  background-color: var(--medium-gray);
  padding: 6px;
  border-radius: 8px;
}

.input-form-label-checkbox {
  display: inline-flex;
  width: auto;
  margin: 0px auto;
  text-align: left;
  margin-bottom: 0px;
  font-weight: inherit;
  color: var(--dark-gray);
  background-color: unset;
  padding: 6px;
  border-radius: 8px;
  font-size: 14px;
}

input[type="checkbox"]  {
  border-radius: 8px;
  height: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 2px solid var(--light-green);
  padding-left: 10px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);;
}


input[type="file"] {
  width: 80%;
  margin: 10px auto;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 3px;
  background-color: white;
}
/*
input::-webkit-file-upload-button {
  border-radius: 5px;
  height: 35px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 1px solid var(--light-green);
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);;
  text-align: center;
  background-color: var(--light-green);
  color: white;
  font-weight: 700;
}
*/

input.form-button {
  border-radius: 5px;
  height: 35px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 1px solid var(--light-green);
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);;
  text-align: center;
  background-color: var(--light-green);
  color: white;
  font-weight: 700;
}

input.form-button:hover {
  cursor: pointer;
  background-color: var(--medium-green);
}
 /*************************************************************Buttons**********************************/
input.button-normal {
  border-radius: 5px;
  height: 35px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 1px solid var(--light-green);
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  background-color: var(--light-green);
  color: white;
  font-weight: 700;
}

input.button-normal:hover {
  cursor: pointer;
  background-color: var(--medium-green);
}

input.button-light {
  border-radius: 5px;
  height: 35px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: 1px solid var(--light-green);
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  background-color: var(--light-blue);
  color: var(--dark-blue);
  font-weight: 700;
}

input.button-light:hover {
  cursor: pointer;
  background-color: var(--medium-gray);
}

/**********************************************************Sections*************************************/
#header {
  background-color: var(--light-green);
  height: 70px;
}

#bar-menu {
  height: 50px;
  width: 100%;
  position: fixed;
  background-color: var(--dark-blue);
  border-radius: 0px 0px 25px 25px;
  top: 0px;
  z-index: 1000;
}

#bar-menu #start {  
  min-width: 50px;
  max-width: 50px;
  /*float: inline-start;*/
  float: left;
  color: var(--light-blue);
  height: 100%;
}

#bar-menu #start .button-menu { 
  margin-top: 12px;
  margin-left: 15px;
}

#bar-menu #start .button-menu:hover { 
  cursor: pointer;
}

#bar-menu #center { 
  /*float: inline-start;*/
  float: left;
}

#bar-menu #center .main-menu { 
  display: inline-flex;
  list-style: none;
}

#bar-menu #center .main-menu li{
  margin-right: 25px;
  margin-left: 5px;
  color: var(--light-blue);
  font-weight: 700;
}

#bar-menu #center .main-menu li:hover {
  cursor: pointer;
}

#bar-menu #center .main-menu li .selected {
  width: 100%;
  height: 3px;
  background-color: var(--light-green);;
  margin-top: 3px;
}

#bar-menu #center .html-menu { 
  display: inline-flex;
  list-style: none;
}

#bar-menu #center .html-menu li{
  margin-right: 25px;
  margin-left: 5px;
  color: var(--light-blue);
  font-weight: 700;
}

#bar-menu #center .html-menu li:hover {
  cursor: pointer;
}

#bar-menu #center .html-menu li .selected {
  width: 100%;
  height: 3px;
  background-color: var(--light-green);;
  margin-top: 3px;
}

#bar-menu #end {  
  /*float: inline-end;*/
  float: right;
  color: var(--dark-blue);
  height: 100%;
  display: inline-flex;
  border-radius: 0px 0px 25px 0px;
  background-color: var(--light-blue);
/*  border: 4px solid #c9c9bd;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
    box-shadow: 3px 2px 6px 0px #555;
}

#bar-menu #end a {    
  list-style: none;
  text-decoration: none;
  font-size: 12px;
  font-weight: 200;
}

#bar-menu #end a:hover {  
  cursor: pointer;
}

#bar-menu #end a:visited {  
  color: var(--dark-blue);
}

#bar-menu #end a .text {  
  margin: -3px 25px;
}


#bar-menu #end .button-login {  
  margin-top: 4px;
  margin-left: 30px;
  font-weight: 700;
}

#bar-menu #end .button-login:hover {  
  cursor: pointer;
}


#bar-menu #end .user-info {
  display: inline-flex;
  margin-left: 5px;
}

#bar-menu #end .user-info .user-info-photo {
  padding-top: 14px;
  margin-right: 10px;
}

#bar-menu #end .user-info a {
  padding-top: 0px;
}

#bar-menu #end .user-info .user-info-rol {
  font-weight: 700;
}


#content {
  background-color: var(--light-green);
  /*min-height: 650px;*/

  width: 100%;
  /*position: relative;*/
  /*min-height:100%;*/ /* real browsers */
  margin-bottom: -120px; 
  min-height: calc(100% - 70px);
  min-height: calc(100vh - 70px);
}

#footer {
    background-color: var(--dark-gray); /*dark gray*/
    height: 120px;
    /*position: absolute;*/
    right: 0;
    bottom: 0;
    left: 0;
}

#footer .logo {
    margin-top: 0px;
    display: inline-flex;
}

#footer p {
  color: white;
  margin-top: 50px;
}

.content-loader
{
  /*position: absolute;*/
  top: 0px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: Calc(100% + 70px);
  display: none;
  position: fixed;
  z-index: 1001;
}

.loader {
  border: 12px solid var(--dark-gray); /*dark gray*/
  border-top: 12px solid var(--light-green); 
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  margin: 30vh auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/************************** ALERT POPUP *****************************************/
.alert-popup {
  width: 100%;
  height: Calc(100% + 70px);
  top: 0px;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  position: fixed;
  z-index: 1001;
} 

.alert-new-group-window {
  width: 760px;
  height: 80%;
  border-radius: 15px;
  background-color: var(--dark-blue);
  margin: auto;
  box-shadow: 2px 3px 5px 5px rgba(0,0,0,0.2);
  border: 1px solid var(--light-green);
  z-index: 1000;
}

/************** loader **/
.alert-new-group-loader
{
    position: fixed;
    display: none;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    width: 760px;
    height: Calc(80% + 56px);
    border-radius: 15px;
    z-index: 1;
}

.alert-new-group-header {
  width: 100%;
  height: 50px;
  border-radius: 13px 13px 10px 10px;
  background-color: var(--light-green);
  margin: auto;
  box-shadow: 2px 3px 5px 5px rgba(0,0,0,0.2);
  color: var(--light-blue);
  display: block ruby;
}

.alert-new-group-header-title {
  font-weight: bold;
  margin-left: 10px;
  font-size: 20px;
  margin-bottom: 0px;
  margin-top: 15px;
  float: left;
}

.alert-new-group-header-close {
  width: 36px;
  height: 40px;
  float: right;
  font-weight: 900;
  user-select: none;
  cursor: pointer;
  margin-top: 3px;
  font-size: 30px;
}

.alert-new-group-subheader{
  width: 100%;
  height: 35px;
  background-color: rgba(0,0,0,0.3);
  margin: auto;
  display: inline-flex;
}

.alert-new-group-subheader-title {
  color: var(--light-blue);
  margin: 0px;
  margin-top: 10px;
  margin-left: 15px;
}

.alert-new-group-content {
  width: 99%;
  /*background-color: var(--dark-blue);
  color: var(--dark-blue);*/
  display: block;
  border-radius: 10px;
  margin: 20px auto;
  height: 85%;
  overflow-x: hidden; 
  overflow-y: scroll; 
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.4) var(--dark-gray);
  /*padding-bottom: 5px;*/
  transition: all 0.2s;
  /*transform: scale(0.98);*/
  will-change: transform;
  user-select: none;   
}