/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

 /* Variables */
 :root {
  --zoom-level: 100%;
  --primary-blue: #2F6BC8;
  --hover-primary: #3D7BDC;
  --darker-primary: #316DCA;
  --lighter-primary: #4990D9;

  --text-primary: #224166;
  --lighter-text-primary: #3C536E;
}

/* General CSS */
 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     zoom: var(--zoom-level);
 }
 
 ul {
     margin: 0;
     padding: 0;
 }
 
 .ms-welcome__header {
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 100px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
 }

 .ms-welcome__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    padding: 10px 20px;
 }
 
 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
 }
 
 .ms-welcome__features {
     list-style-type: none;
     margin-top: 20px;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem {
     padding-bottom: 20px;
     display: -webkit-flex;
     display: flex;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
     margin-right: 10px;
 }
 
 .ms-welcome__action.ms-Button--hero {
     margin-top: 30px;
 }
 
.ms-Button.ms-Button--hero .ms-Button-label {
  color: #0078d7;
}

.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
  color: #005a9e;
  cursor: pointer;
}

b {
    font-weight: bold;
}
/* Standardisation */

.primary-button{
  background-color: var(--primary-blue);
  color: white;
}
.primary-button:hover{
  color:white;
  background-color: var(--hover-primary);
}

.border-button{
  border: 1px solid var(--darker-primary) !important
}

/* Page Templating */

.page-header{
  margin-left:0%;
  font-weight: 650;
  color: var(--text-primary);
}
.row-level-1{
  margin-bottom:2%;
}
.row-level-2{
  margin-bottom:2%;
}
.update-text{
  font-size:14px;
  margin-right:4%;
  font-weight:650;
  color: var(--lighter-text-primary);
}
.update-toggle{
  margin-top:1%;
  text-align:end;
}

.filter-headers{
  font-weight:bold;
  font-size:17px;

}

/* Login */
.login-container {
    background: url('https://images.unsplash.com/photo-1562240020-ce31ccb0fa7d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80');
    background-size: 100%;
    background-position: center top;
    position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      overflow:hidden;
  }

  .login {
    border-radius: 25px;
    padding: 25px;
    margin: auto;
    width: 80%;
    background-color: white;
    box-shadow: 0 0 10px #9a9fa3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loginLogo{
    background-image: url('http://mach-addins.com/Assets/MACH_GROUP.png');
    background-size: contain;
    background-repeat: no-repeat, repeat;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
  }
  @media (max-width: 576px) {
  
    .loginLogo {     
      height: 70px;
      max-width: 150px;
    }
  }
  
  @media (min-width: 576px) {
  
    .loginLogo {
      height: 80px;
      max-width: 200px;
    }
  }
 
  .login-label{
      font-weight:bolder;
      font-size:15px;
  }

/* Navbar */

@media (max-width: 768px){
  .zoom-container{
    margin-left: 0 !important;
  }
}
@media (max-width: 768px){
  .zoom-row{
    width: 160px !important;
  }
}
.zoom-decrement-col{
  margin: 4px 0 0 4%;
  padding:0;
}
@media (max-width: 768px){
  .zoom-decrement-col{
    margin:0 -2% 0 0% !important;
    padding:0 !important; 
    margin-top: 1px !important;
  }
}
.zoom-button-decrement{
  font-size:20px;
  font-weight:bold;
  text-align: center;
  padding: 0 12px 4px 12px;
}
.zoom-increment-col{
  margin:4px 0.2% 0 -4.25%;
  padding:0;
}
@media (max-width: 768px){
  .zoom-increment-col{
    margin:0 0 0 0 !important;
    padding:0 !important; 
    margin-top: 1px !important;
  }
}
.zoom-button{
  font-size:20px;
  font-weight:bold;
  text-align: center;
  padding: 0 9px 4px 9px;
}

.zoom-control{
  width:70px;
  text-align: center;
  font-weight:bolder;
  background-color: #292b2c;
  color:#959594;
}

.zoom-box{
  background-color: #292b2c;
  color:#959594;
  width: 70px;
}

.zoom-col{
  padding-left: 6px;
  margin-top: 2px;
}
@media (max-width: 768px){
  .zoom-col{
    margin:0 !important;
    padding:0 !important;
    margin-right: 6px !important;
  }
}
.navbar{
  margin-bottom:3%;
  padding:20px 0 0 0;  
}

.nav-1{
  margin:0;
  padding:0 0 15px 0;
  background-color: #212529;
  border-color: #212529;
  flex-direction: inherit;
}

.nav-2{
  margin:0;
  padding:0 0 0 0;
  background-color: #212529;
  border-color: #212529;
}
.nav-item{
  margin-right:6px;
}

@media (max-width: 768px){
  .nav-item{
      margin-right: 21px;
  }
  .nav-logo{
    margin-right:23px;
  }
}

.nav-logo{
  margin-left: 15px;
}
.navbar-toggler{
  margin-bottom: 15px !important;
  padding:0 !important;
  margin-right: 20px !important;
}

/* Logout */
@media (min-width: 768px){
    .logout{
        margin: 4px 0 0 20% !important; 
    }
}
.logout{
    margin: 0 0 2% 0;    
}

/* Sections and Templates */
.section-buttons{
  text-align: right;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.fee-button{
  margin-left: 10px;
}
.section-container{
  box-shadow: 0 0.5rem 2rem #E3E3E3 ;
  margin: 1%;
  padding:1%;
}

.template-container{
  box-shadow: 0 0.5rem 2rem #E3E3E3 ;
  margin: 1%;
  padding:1%;
}
.category-buttons{
    margin:0 1% 0 0;
}
.xl-button{
    font-size:16px;
    font-weight:bolder
}
.insert-button{
  font-size:20px;
  font-weight:bolder;
  padding:3px 12px;
}

/* Modal */
.backdrop {
  width: 250vw;
  height: 250vh;
}

.modal-header{
  color:white;
  background-color: var(--primary-blue);
}
.modal-header-edit{
  color:white;
  background-color: var(--lighter-primary);
}

.modal-footer{
  background-color: #DEDEDE ;
}
.no-category{
  font-size:15px;
  color:red;
  font-weight: 550;
}

/* Tagify */
.tags-look .tagify__dropdown__item{
  display: inline-block;
  border-radius: 3px;
  padding: .3em .5em;
  border: 2px solid #BBBDC1;
  background: #CED0D5;
  margin: .2em;
  font-size: .85em;
  color: black;
  transition: 0s;
  font-weight:bolder;
}

.tags-look .tagify__dropdown__item--active{
  color: black;
}

.tags-look .tagify__dropdown__item:hover{
  background: #B5CEFA;
  border-color: #79A7F8;
}

/* General */
.bolder{
  font-weight:bolder;
}

/* Popover */
.popover{
  position:absolute;
 margin-left:100%;
 margin-top:4.5%;
 padding:0;
 width:35%;
}
.popover-header{
  background-color: #777A7E;
  color:white;
  font-weight:bolder;
}
@media screen and (max-width: 800px){
  .popover{
    position:absolute;
    margin-top:80% !important;
    margin-left:33% !important;
  }
}
@media screen and (max-width: 578px){
  .popover{
    position:absolute;
    margin-top:80% !important;
    margin-left:25% !important;
    width:45% !important;
    
  }
}

@media screen and (max-width: 573px){
  .popover{
    position:absolute;
    margin-top:70% !important;
    margin-left:25% !important;
    width:45% !important;
    
  }
}
@media screen and (max-width: 545px){
  .popover{
    position:absolute;
    margin-top:80% !important;
    margin-left:20% !important;
    width: 50% !important;

  }
}
@media screen and (max-width: 500px){
  .popover{
    position:absolute;
    margin-top:85% !important;
    margin-left:20% !important;
    width: 50% !important;

  }
}
@media screen and (max-width: 465px){
  .popover{
    position:absolute;
    margin-top:93% !important;
    margin-left:20% !important;
    width: 50% !important;

  }
}
@media screen and (max-width: 430px){
  .popover{
    position:absolute;
    margin-top:102% !important;
    margin-left:23% !important;
    width:50%;
  }
}
@media screen and (max-width: 430px){
  .popover{
    position:absolute;
    margin-top:115% !important;
    margin-left:23% !important;
    width:60%;
  }
}

@media screen and (max-width: 300px){
  .popover{
    display: none !important;
  }
}

/* ICONS */
.all-font-icons{
  margin: 0;
  padding:0
}

.info-icon{
  position:absolute;
  margin-left: 64.5%;
  margin-top:1.5%;
  font-size: 80%;
}
.no-tags{
  margin-right: 8px;
}
.info-icon:hover{
  color:#DBDDDF
}

@media screen and (max-width: 480px){
  .info-icon{
    position:absolute;
    margin-left: 55% !important;
    margin-top:2% !important;
    font-size: 90% !important ;
  }

@media screen and (max-width: 400px){
  .info-icon{
    position:absolute;
    margin-left: 45% !important;
    margin-top:3% !important;
    font-size: 90% !important ;
  }
}
@media screen and (max-width: 330px){
  .info-icon{
    position:absolute;
    margin-left: 35% !important;
    margin-top:3% !important;
    font-size: 90% !important ;
  }
}

@media screen and (max-width: 300px){
  .info-icon{
    display:none !important;
  }
}