/*------------------------------------------
date:03/23/2021
author: Joseph DiMarco for COMP495
project: Sentence rebuilder project
email: Joseph_DiMarco@hotmail.com

---------------------------------------------*/

/* || General Styles */

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    background-color: rgba(48, 48, 42);
}

h1, h2, h3{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 40px;
}

h4, h5{
    padding:7px;
}
/* || UTILITIES */
.clear{
    clear: both;
}

.right{
    float: right;
}

.left{
    float: left;
}
/* || SiteWide */

#contentMain{
    margin-left:auto;
    margin-right:auto;
    background-color: rgba(218, 245, 193, 0.9);
    border-radius: 10px;
    padding:30px;
}

#contentMain p{
    text-align: left;
    padding-bottom: 20px;
    font-size:1.1em;
    margin-right:40px;
    margin-left:40px;
    line-height: 30px;
}

.genericButton{
    display:inline-block;
    text-decoration: none;
    color:rgb(51, 102, 184);
    background-color:white;
    border-radius: 5px;
    text-align: center;
    margin:40px;
    padding:4px;
    transition:0.5s;
    box-shadow: 2px 2px;
}

.genericButton:hover{
    color:white;
    background-color: rgb(153, 172, 201);
}

.genericButton:disabled{
    cursor:default;
    background-color:gray;
}

.genericButton:disabled:hover{
    color:rgb(51, 102, 184);
    background-color:gray;
}

.genericLink{
    color:rgb(51, 102, 184);
    transition:0.5s;
}

.genericLink:hover{
    color:rgb(153, 172, 201);
}

.genericLabel{
    display: inline-block;

}

.genericInput{
    border-radius: 5px;
    padding-left:10px;
}

.genericCheck{
    margin-left:20px;
    transform:scale(1.5);
}

.genericCheck:hover{
    background-color:rgb(153, 172, 201);
}

.genericArea{
    resize:none;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

.genericSelect{
    border-radius: 5px;
    font-size: 1.1em;
}

.error{
    font-size: 0.8em;
    color:red;
    display:inline-block;
}

.success{
    font-size: 0.8em;
    color:green;
    display:inline-block;
}

.error p, .success p{
    text-align: center;
}

.loader{
    display:none;
}

body.loading .loader{
    overflow: hidden;
    display: block;
}

.screenFigure{
    padding:20px;
}

.screenFigure img{
    border-radius: 10px;
}

/* || Header & Nav */
header{
    padding: 10px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.dropdown{
    position: relative;
    float:right;
    padding-top:15px;
}

#menuIcon {
    transition: color 0.5s ease;
    padding-top: 1px;
    cursor: pointer;
}

#menuIcon:hover #bar1, #menuIcon:hover #bar2, #menuIcon:hover #bar3{
    background-color: rgb(153, 172, 201) !important;
}

#bar1, #bar2, #bar3{
    background-color: white;
    width: 50px;
    height: 8px;
    margin: 6px 0;
    transition: 0.5s;
}

#mainNav{
    visibility:hidden;
    position:absolute;
    background-color: rgb(152, 203, 235);
    border-radius: 10px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: 0;
    z-index: 1;
    top:100%;
    transition: opacity 0.5s, visibility 0.5s;
}

#mainNav.fade{
    visibility: visible;
    opacity: 1;
}

#mainNav a{
    display:block;
    font-size:1.2em;
    text-decoration: none;
    color:rgb(110, 109, 57);
    background-color:white;
    border-radius: 5px;
    text-align: center;
    margin:5px;
    padding:10px;
    transition:0.5s;
}

#mainNav a:hover{
    color:white;
    background-color: rgb(110, 109, 57);
}

/* || Home page */

.homePage{
    width:900px;
    margin-top:40px;
}

.homeButton{
    font-size: 1.6em;
}

/* || Form Pages */

.formPage{
    width:700px;
    margin-top:120px;
}

.formEntry{
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:30px;
    justify-content: center;
    justify-items:flex-end;
}

.formLink{
    font-size:1.1em;
    padding:10px;
}

.formOption{
    padding-top:20px;
    font-size:1.1em;
}

.formButton{
    cursor: pointer;
    font-size: 1.5em;
}

.formLabel{
    font-size: 1.4em;
    text-align: center;
}

.formInput{
    font-size: 1.4em;
}

.loginMessage{
    color:green;
}

/* || App Pages (Manage, Ask, viewRule) */

.appPage{
    width:1100px;
}

.askGridContainer{
    display:grid;
    grid-template-columns: repeat(7, 150px);
    grid-template-rows: repeat(6, 100px);
    column-gap: 10px;
    row-gap:10px;
    grid-template-areas: 
    "leftTop leftTop leftTop leftTop rightTop rightTop rightTop"
    "leftTop leftTop leftTop leftTop rightTop rightTop rightTop"
    "leftBot leftBot leftBot leftBot rightMid rightMid rightMid"
    "leftBot leftBot leftBot leftBot rightMid rightMid rightMid"
    "leftBot leftBot leftBot leftBot rightBot rightBot rightBot"
    "leftBot leftBot leftBot leftBot rightBot rightBot rightBot";
    justify-content: center;
}

.manageGridContainer{
    display:grid;
    grid-template-columns: repeat(7, 150px);
    grid-template-rows: repeat(6, 115px);
    column-gap: 10px;
    row-gap:10px;
    grid-template-areas: 
    "leftTop leftTop leftTop leftTop leftTop rightTop rightTop"
    "leftTop leftTop leftTop leftTop leftTop rightTop rightTop"
    "leftTop leftTop leftTop leftTop leftTop rightMid rightMid"
    "leftTop leftTop leftTop leftTop leftTop rightMid rightMid"
    "leftBot leftBot leftBot leftBot leftBot rightBot rightBot"
    "leftBot leftBot leftBot leftBot leftBot rightBot rightBot";
    justify-content: center;
}

.appPanel{
    background-color: rgba(118, 194, 232, 0.4);
    border-radius: 10px;
    overflow: auto;
}

.leftTop{
    grid-area: leftTop;
}

.leftBot{
    grid-area: leftBot;
}

.rightTop{
    grid-area: rightTop;
}

.rightMid{
    grid-area: rightMid;
}

.rightBot{
    grid-area: rightBot;
}

/* || Ask Module */



.userRule{
    display:grid;
    grid-template-columns: repeat(3, 140px);
    grid-template-rows: repeat(2, 40px);
    grid-auto-flow: column;
    column-gap: 5px;
    justify-content: center;
    place-items: center;
    margin-top:15px;
    margin-right:5px;
    margin-left:5px;
    border-radius: 10px;
    border: 3px solid;
}

.commRule{
    display:grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(2, 40px);
    grid-auto-flow: column;
    column-gap: 5px;
    justify-content: center;
    place-items: center;
    margin-top:15px;
    margin-right:5px;
    margin-left:5px;
    border-radius: 10px;
    border: 3px solid;
}

.ruleButton{
    margin:4px;
    cursor:pointer;
    padding:6px;
}

.userButton{
    font-size:1.2em;
}

.askGrid{
    display:grid;
    grid-template-columns: repeat(4, 150px);
    grid-template-rows: repeat(7, 55px);
    column-gap: 5px;
    row-gap: 5px;
    grid-template-areas: 
    "label label label label"
    "textarea textarea textarea textarea"
    "textarea textarea textarea textarea"
    "ask ask ask ask"
    "wordLabel wordLabel wordInput wordInput"
    "letterLabel letterLabel letterInput letterInput"
    ". . fileButton fileButton";
    justify-content: center;
    place-items: center;
}

#areaLabel{
    grid-area: label;
    font-size: 1.1em;
}

#formArea{
    grid-area: textarea;
}

.askButton{
    grid-area: ask;
    margin:2px;
    padding:10px;
    font-size: 1.5em;
    cursor:pointer;
}

.appInput{
    font-size:1.1em;
    width:40px;
    text-align: center;
    padding-left: 1px;
}

#wordLabel{
    grid-area: wordLabel;
}

#wordChar{
    grid-area: wordInput;
}

#letterLabel{
    grid-area: letterLabel;
}

#letterChar{
    grid-area: letterInput;
}

#file{
    grid-area: fileButton;
}

#fileSelect{
    grid-area: fileButton;
    cursor:pointer;
    font-size:1.1em;
}

.askSuggestion{
    border-radius: 10px;
    border: 4px solid;
    padding:10px;
    margin:10px;
}

.suggHead{
    display:block;
    font-size:1.4em;
    font-weight:700;
    text-align: left;
    text-decoration: underline;
    padding-bottom:20px;
}

.singleSuggestion{
    border: 2px solid;
    border-radius: 5px;
    padding:5px;
    margin:8px;
}

.ruleSentence{
    display:block;
    font-size:1.3em;
    font-weight:500;
    text-align: left;
    padding-bottom:10px;
}

.suggestionLine{
    display:block;
    font-size:1.1em;
    text-align: left;
    padding-bottom:5px;
}
/* || Ask and Manage Module */

.switch{
    position:relative;
    display: inline-block;
    width:45px;
    height:25px;
}

.switch input{
    opacity:0;
    height:0;
    width:0;
}

.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 35px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    transform: translateX(18px);
  }

  .ruleTitle{
      font-size:1.1em;
      max-width: 95px;
      max-height: 60px;
      overflow: hidden;
      overflow-wrap: break-word;
      grid-row: 1 / span 2;
  }

/* || Manage module */

.accDetail{
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding:10px;
}

.manageRule{
    display:grid;
    grid-template-columns: 125px 80px 80px;
    grid-template-rows: 70px;
    column-gap: 5px;
    justify-content: center;
    place-items: center;
    margin-top:10px;
    margin-right:5px;
    margin-left:5px;
    border-radius: 10px;
    border: 3px solid;
}

.manageUserRule{
    display:grid;
    grid-template-columns: 125px 80px 80px;
    grid-template-rows: repeat(2, 40px);
    column-gap: 5px;
    justify-content: center;
    place-items: center;
    margin-top:15px;
    margin-right:5px;
    margin-left:5px;
    border-radius: 10px;
    border: 3px solid;
}

.ruleGrid{
    display:grid;
    grid-template-columns: repeat(3, 250px);
    grid-template-rows: repeat(2, 190px);
    column-gap: 5px;
    row-gap: 5px;
    grid-template-areas: 
    "ruleBuild ruleBuild profileView"
    "ruleBuild ruleBuild ruleConstructs";
    justify-content: center;
}

.ruleArea{
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    overflow: auto;
    margin:5px;
}

.ruleBuild{
    grid-area: ruleBuild;
    position:relative;
}

.profileView{
    grid-area: profileView;
}

.ruleConstructs{
    grid-area: ruleConstructs;
}

#profileInfo{
    position:absolute;
    background-color: rgba(152, 203, 235, 0.8);
    border-radius: 10px;
    min-width: 300px;
    min-height: 400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display:none;
}

.floatingTip{
    display:none;
    position:absolute;
    background-color: rgba(152, 203, 235, 0.9);
    border-radius: 10px;
    min-width: 400px;
    min-height: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right:0%;
    bottom:0%;
}

.construct{
    font-size: 1.1em;
    font-weight:600;
    border-radius: 4px;
    margin:8px;
    cursor: pointer;
    display: inline-block;
    text-align:center;
}

.dropzone{
    min-height: 200px;
    width:450px;
    background-color: rgba(0,0,0,0.2);
    display: inline-block;
    text-align: center;
}

.manageButton{
    margin:20px;
    padding:5px;
    font-size: 1.3em;
    cursor:pointer;
}

.deleteButton{
    margin:5px;
    color:red;
    font-weight: 900;
    font-size: 0.8em;
    cursor: pointer;
}

.mainRule{
    background-color: rgba(255,255,0,0.4);
}

.triggerMain{
    background-color: rgba(255,255,255,0.4);
    display:none;
}

.triggerResponse{
    background-color: rgba(255,0,0,0.4);
    display:none;
}

.wildcard{
    background-color: rgba(0,255,255,0.4);
    display:none;
}

.choiceCon{
    background-color: rgba(0,0,255,0.4);
    display:none;
}

.posCon{
    background-color: rgba(0,255,0,0.4);
    display:none;
}

.catItem{
    background-color: rgba(255,0,255,0.4);
    display:none;
}

.inputAdd{
    background-color: rgba(211, 115, 5, 0.4);
    display:none;
}

.ruleInput{
    font-size:1.1em;
}

.ruleName{
    margin:4px;
}

.singleRule{
    text-align: center;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px;
    margin:7px;
    overflow: hidden;
}

.profileButton{
    margin:2px 25px 10px;
    padding:5px;
    font-size: 1em;
    cursor:pointer;
}

.profileGrid{
    display:grid;
    grid-template-columns: repeat(4, 185px);
    grid-template-rows: repeat(5, 37px);
    column-gap:2px;
    row-gap:2px;
    grid-template-areas: 
    "nameLabel nameLabel descLabel descLabel"
    "nameInput nameInput descArea descArea"
    "langLabel langLabel descArea descArea"
    "langInput langInput descArea descArea"
    "saveButton duplicateButton duplicateButton shareButton";
    justify-content: center;
    place-items: center;
}

#nameLabel{
    grid-area:nameLabel;
}

#profileName{
    grid-area:nameInput;
    font-size:1em;
}

#descLabel{
    grid-area:descLabel;
}

#langLabel{
    grid-area:langLabel;
}

#langSelect{
    grid-area: langInput;
}

#descArea{
    grid-area: descArea;
}

#duplicateButton{
    grid-area: duplicateButton;
}

#shareButton{
    grid-area: shareButton;
}

#saveButton{
    grid-area:saveButton;
}

.twoRowButton{
    grid-row: 1 / span 2;
}

/* || ViewRule-Specific Styles (Many styles are taken from manaage module styles above */

.ruleViewGrid{
    display:grid;
    grid-template-columns: repeat(3, 250px);
    grid-template-rows: repeat(2, 230px);
    column-gap: 5px;
    row-gap: 5px;
    grid-template-areas: 
    "ruleBuild ruleBuild profileView"
    "ruleBuild ruleBuild profileView";
    justify-content: center;
}

.ruleViewConstructs{
    display: none;
}