@import "~@angular/material/prebuilt-themes/indigo-pink.css";



:root {

  --smart: 688px;
  --medium: 1048px;
  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
  --xl: 36px;
  --xxl: 48px;

  --radius-1: 12px;
  --radius-2: 20px;
  --white: #ffffff;
  --light: #F6F6F6;


  --prime: #0070BA;
  --prime-hov: #005799;
  --prime-act: #004077;
  --prime-dis: #A1CAE5;



  --second: #6C6C6C;
  --second-hov: #4D4D4D;
  --second-act: #2D2D2D;
  --second-dis: #C0C0C0;


  --blue-0: #2EB2E8;

 
  
}

.style-color{
  background-color: var(--light);
}

 .mat-calendar-body-selected {
  background-color: #0079c2;
}

button.mat-calendar-body-cell:hover{
  background-color: transparent;
  border: none;
  font-weight: 400;
}

button.mat-calendar-body-cell{
  font-weight: 400;
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){
  background-color: rgba(0, 162, 255,0.3);
  font-weight: 400;
}

.tox-promotion, .tox-statusbar__branding {
  display: none!important;
}


*, ::after, ::before {
  box-sizing: border-box;
}

* {scrollbar-color:transparent transparent; scrollbar-width:none;}
*::-webkit-scrollbar-track {background-color:transparent;}
*::-webkit-scrollbar {width:0; height:0; background-color:transparent;}
*::-webkit-scrollbar-thumb {background-color:transparent; border-radius:2rem;}


html {
  height: 100%;
  font-family: "PT Sans";
  font-size: 16px;
  -webkit-font-smoothing:antialiased;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  color: var(--second-act);
  background-color: var(--light);
  .wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .content {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      left-content{
        flex-basis: 100%;
        background-color: var(--light);
        .background{
          width: 100%;
          height: 400px;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          flex-direction: column;
          border-bottom: 1px solid var(--second-dis);
          border-top: 1px solid var(--second-dis);
          .left-content{
            width: 100%;
            height: 100%;
            max-width: 1360px;
            padding: 0 40px;
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            .h1-jumbotron{
              display: inline-block;
              border-bottom: 12px solid var(--blue-0);
                font-family: PT Sans Narrow;
                font-size: 76px;
                font-weight: 700;
                line-height:100%;
                letter-spacing: 0.76px;
                color: white;
            }
            header-user-bar{
              position: absolute;
              right: 40px;
              top: 32px;
            }
            .menu{
              position: absolute;
              left: 0px;
              top: 32px;
            }        
          }
        }
        .edit-field{
          height: 58px;
          width: 100%;
          background-color: var(--white);
          display: flex;
          justify-content: center;
          .edit-field-row{
            width: 100%;
            max-width: 1280px;
            margin: 0 40px;
            display: flex;
            justify-content: right;
            align-items: center;
            font-size: 20px;
            gap: 8px;
          }

        }
      }
      .main-content{
        flex-basis: 840px;
        .pages{
          width: 100%;
        }
      }
      right-content{
        flex-basis: 400px;
      }
    }
  }
}

.limiter {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


h2 {
  color: var(--second-act);
  font-family: PT Sans Narrow;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 120% */
  letter-spacing: 0.5px;
  padding-top: 16px;
  margin:0;
}
h3 {
  color: var(--second-act);
  font-family: PT Sans Narrow;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 120% */
  letter-spacing: 0.36px;
  padding-top: 8px;
  margin:0;
}
h4 {
  color: var(--second-act);
  font-family: PT Sans Narrow;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px; /* 133.333% */
  letter-spacing: 0.24px;
  padding-top: 8px;
  margin:0;
}

a {
  text-decoration: none;
  color: var(--prime);
  cursor: pointer;
  &:hover{
    color: var(--prime-act);
  };
  &.document {
    display: inline-flex;

    &:before {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      flex-shrink: 0;
      background: transparent url('~projects/app-vniigaz/src/assets/images/icons/document/document_20.svg') 50% 50% no-repeat;
      content: '';
    }
  }
}

span.link {
  font-weight: normal;
  color: #86898E;
  cursor: pointer;
}

.fullwidth {
  width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
}

.loader {
  margin-top: 32px;
  text-align: center;
  animation: fade-in-and-scale 0.5s infinite;
  &:before {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background-image: radial-gradient(rgba(44,134,205,1), rgba(44,134,205,0));
    content: '';
  }
}

.op-63{
  opacity: 0.63;
}
html-section ul{
  padding: 0;
  >li{
    list-style: none;
    &::before{
      display: inline-block;
      content: "";
      width: 16px;
      height: 2px;
      background-color: var(--prime);
      margin-bottom: 5px;
      margin-right: 16px;
    }
  }
}


@media screen and (min-width: 1330px) {
  .fullwidth {
    width: 100vw;
    margin-left: calc((1160px - 100vw) / 2);
    margin-right: 0;
  }
}



@keyframes slide-from-right {
  0% {transform: translateX(100%);}
  100% {transform: translateX(0);}
}

@keyframes slide-from-left {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

@keyframes slide-from-top-and-fade-in {
  0% {transform: translateY(-100%); opacity: 0}
  100% {transform: translateY(0); opacity: 1}
}

@keyframes slide-from-bottom-and-fade-in {
  0% {transform: translateY(100%); opacity: 0}
  100% {transform: translateY(0); opacity: 1}
}


@keyframes fade-in-and-scale {
  0% {transform:scale(0.3); opacity:0;}
  100% {transform:scale(1); opacity:0.5;}
}

@media screen and (max-width: 480px) {
  h2{
    font-size: 36px;
    line-height: 44px;
  }
  h3{
    font-size: 24px;
    line-height: 32px;
  }
  h4{
    color:var(--second);
  }
}


@media screen and (max-width: 1330px) {
  .limiter {
    padding: 0 24px;
  }
  .fullwidth {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
  }

}