/* STYLESHEET FOR PORTAL PAGES {SEP 2022} */
:root {
  --clr-light-1:#fff;
  --clr-dark-1:#c9e4fd;
  --clr-dark-2:#134878;
  --clr-dark-3:#b3d0eb;
  --milon-clr-1: #67a5df;
  --milon-clr-2: #67a5df73;
  --content-bg:#f5d2b9;
  --content-bg-hover:#f2976d;
  --content-txt:#7e3513;
  --gray-bg:#f6f9fc;
  }

@font-face {
    font-family: Varela;
    src: url('../inc/fonts/VarelaRound-Regular.ttf');
  }

body {
    font-family: "Varela", Arial, Helvetica, sans-serif;
  }

main {
    margin-top:40px;
}

article {
    background:#d4eaff;
    border: 1px solid #46464626;
    margin-bottom:35px;
}

h1 {
  background-color: rgba(212, 234, 255, 0.20);
  border: solid;
  border-color: #e8f2fb #d4eaff #c4dff8 #e7f3ff;
  border-radius: 15px;
  border-width: 0;
  box-shadow: 0 1px 2px rgb(144 190 234 / 66%);
  color: #4191c2;
  font-size: 150%;
  font-weight: 400;
  margin: 0px auto 20px auto;
  padding: 10px 0;
  text-align: center;
}

h2 {
  color: #464646;
  font-size:1.4em;
  margin: 14px 0 6px 0;
  text-align: center;
}

.school h2 {
  font-size:1em;
  font-weight: 400;
  margin:6px 0;
}

.listDivImg {
  text-align:center; 
  background:white;
  border-bottom: 1px solid;
}

.school .listDivImg {
  text-align:center; 
  background:white;
  border-style:solid;
  border-width:1px 0;
}

.listDivImg img {
  max-height:100px;
}


.linkItem {
    background: #d4eaff;
    border: 1px solid #46464626;
    margin-bottom: 35px;
}

.itemInfo {
    text-align: justify;
    font-size: 0.9em;
    margin: 15px 25px 5px 25px;
    padding: 5px;
    color: #6d6d6d;
    line-height: 1.4em;
}

.itemLinks {
  background: #ffffff90;
  display: inline-block;
  padding: 7px;
  width:87%;
}

.itemLinks img:hover {
    transform: scale(1.1);
}

.itemImg {
    text-align:center; 
    background:white;
    border-bottom: 1px solid;
    }

.itemImg img {
    max-height:100px;
    }

img[alt=facebook],
img[alt=instagram],
img[alt=patreon],
img[alt=spotify],
img[alt=telegram],
img[alt=tiktok],
img[alt=youtube],
img[alt=whatsapp]{
    height:40px;
    width:40px;
    object-fit:cover;
    border-radius:50%;
    }
img[alt=website]{
    height:40px;
    background:white;
    border-radius:50%;
    }
img[alt=googlePlay],
img[alt=apple]{
    height:40px;
    background:white;
    opacity:0.8;
    }

.lastUpdate {
    /* background: white; */
    /* color: #999; */
    font-size: small;
    padding: 8px 0 4px 0;
    /* text-align: left; */
}


/* from top.portal.asp */
    #bar-top {
    background-color: #f6f9fc; 
    border-bottom: 1px solid #cddbea;
    position: sticky;
    top:0;
    z-index:2;
  }

  #bar-search-container {
    background-color: #f6f9fc; 
  }

  #bar {
    width:100%;
  }

  #bar-menu {
    cursor: pointer;
    flex:0 0 40px;
  }

  #bar-logo {
    cursor: pointer;
    flex:0 0 40px;
    padding-left:3px;
  }

  #bar-logo img {
    max-height: 41px;
  }
  #bar-search {
    flex:1;
    background: #f6f9fc;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:large;
    letter-spacing:0.2em;
    padding:0.2em;

  }
  
  #bar-search-flex {
    display:flex;
    height:40px;
  }
  
  #siteTitle {
    background: #f6f9fc;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:large;
    letter-spacing:0.2em;
    padding:0.2em;
  }

  #searchBoxTop {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    max-width:600px;
    background: white; 
    display: block; 
    width: 100%; 
    height: 94%; 
    padding: 3px 6px; 
    border: 1px dotted gray; 
    font-size:1.6em;
    margin:0 auto;
    background-image:url(img/site/search.png);
    background-repeat:no-repeat;
    background-position:left;
    background-size:24px;
  }
  
  #searchBoxTop::placeholder {
    color:#bbb;
    padding-right:10px;
    font-size:0.8em;
  }

#clear-input, #search-button {
    border: 0;
    background: NONE;
    cursor: pointer;
    padding:5px;
    border-radius:5px;
  }

  #clear-input {
    font-family: 'Material Icons';    
    font-size: 20px;
    background: #c7c7c7;
    color: black;
  }

  #clear-input:hover {
    background: gray;
    color: white;
  }

  #search-button {
    font-size: 30px;
    background: #5b7a99;
    color:white;
  }

  #search-button:hover {
    background: #d4eaff;
    color: #5b7a99;
  }

/* for top.portal.asp and homepage*/

  .milon          {border-color:var(--milon-clr-1);}
  .content        {border-color:var(--content-txt);}
  .learn          {border-color:var(--clr-dark-2);}
  .tools          {border-color:var(--clr-dark-2);}
  .subjects       {border-color:var(--clr-dark-1);}
  .content        {text-align:center;}

  .milon          h2 {background:#f6f9fc;}
  .content        h2 {background:var(--clr-light-1);}
  .learn          h2 {background:var(--clr-light-1);}
  .tools          h2 {background:var(--clr-light-1);}
  .subjects       h2 {background:var(--clr-light-1);}

  .milon          li {background:var(--milon-clr-2);}

  .learn          li {background:var(--clr-dark-1);}
  .tools          li {background:var(--clr-dark-1);}
  .subjects       li {background:var(--clr-dark-1);}

  .content    img {opacity:0.9;}
  .content    img:hover {opacity:1;}

  .content a, .content p {
    color: var(--content-txt);
  }

  .learn a, .tools a {
      color:var(--clr-dark-2);
  }





/* for schools.asp */

.locations { 
text-align: center;
margin: 10px 5px 5px 5px;
}

.locations > label {
    padding: 3px 8px;
    border-radius: 50%;
    color: #464646;
    box-shadow: #464646 1px 2px;
    font-size: small;
}

.online { background: yellow; }
.tlv { background: #00f3ff; }
.haifa { background: #10ff00; }
.jerusalem { background: #fd6cf8; }



/* for teachers.asp & about.asp */

.showcase {
  align-items: center;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  padding:10px;
}
.showcase img {
  background-color:white;
  border: 3px solid white;
  border-radius:50%;
  flex:128px;
  height:128px;
  max-width:128px;
}

.teacher, .school {
  border-radius:10px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom:10px;
  width:min(500px,95%);
}

.school {
  text-align: center;
}

.teacher h2 {
  font-size:large;
  padding:0;
}
.teacher p {
  flex:60%;
  margin:0;
  padding:10px 15px;
  text-align:justify;
}
.teacher ul {
  font-size:small;
}

.teacher table {
  width:100%;
}
.teacher td {
  background:white;
  border:1px solid #ddd;
  padding:0.2em;
}

.teacher .lastUpdate {
  background:none;
  text-align:left;
  font-size:initial;
  padding:4px 4px 0 4px;
}

@media (max-width:500px) {
  .teacher p {
      flex:100%;
  }
}