@import url('./reset.css');
@import url('./color.css');
@import url('./fonts.css');
@import url('./media.css');
@import url('./btn.css');

body{
   background: var( --light-gray);
}

::-webkit-scrollbar{
   display: none;
}

.navbar{
   position: relative;
   padding: 40px 0 75px 0;
   border-radius: 0px 0px 0px 100px;
   background: #5964E0;
   z-index: 0;
   overflow-x: hidden;
}

.navbar__head{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.navbar__modes{
   display: flex;
   align-items: center;
   gap: 10px;
}

.navbar__modes-light,
.navbar__modes-dark{
   width: 35px;
   height: 20px;
}

#toggle{
   position: relative;
   width: 40px;
   height: 20px;
   background: #FFF;
   border-radius: 125px;
   cursor: pointer;
}

.identifikator{
   position: absolute;
   width: 12px;
   height: 12px;
   background: #5964E0;
   top: 4px;
   left: 4px;
   border-radius: 50%;
   transition: .5s ease;
}

.active .identifikator{
   left: 24px;
   background: #939BF4;
}


.navbar__bg{
   position: absolute;
   z-index: -1;
}

.tri1{
   left: 0px;
   top: 15px;
}

.tri2{
   left: 14.7%;
   top: -1px;
}

.tri3{
   right: 6%;
   top: -6px;
}

/* navbar styles done*/


/* user__about-main's styles */

.user__about-main{
   position: relative;
   z-index: 1;
   top: -40px;
}

.user__about-form{
   display: flex;
   justify-content: space-between;
   border-radius: 6px;
   background: var(--white);
}

.user__about{
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.form__user{
   width: 100%;
   display: flex;
   justify-content: center;
}

.user__about-search{
   width: 100%;
   padding: 18px 32px;
   display: flex;
   align-items: center;
}

.user__about-filter{
   display: none;
}

.user__about--title,
.user__about--location{
   border-right:1px solid #9daec269;
   stroke-opacity: 0.1;
   gap: 16px;
}

.user__about--time{
   justify-content: space-between;
}

.user__about-checked{
   display: flex;
   gap: 16px;
   align-items: center;
}

.user__about-filter{
   display: none;
}

.users__jobs-carts{
   display: flex;
   align-items: center;
   gap: 65px 30px;
   flex-wrap: wrap;
   margin-top: 6%;
}

.user__job-cart{
   min-width: 300px;
   width: 31.7%;
   border-radius: 6px;
   background: var(--white);
   padding: 0 32px 32px 32px;
}

.user__job-logo{
   width: 50px;
   height: 50px;
   margin-top: -25px;
}

.color{
   color: red;
   background: black;
}

.user__job-info{
   display: flex;
   flex-direction: column;
   gap: 44px;
   margin-top: 24px;
}

.user__job{
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.user__job-body{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.line__circle{
   display: inline-block;
   width: 4px;
   height: 4px;
   background: #6E8098;
   flex-shrink: 0;
   border-radius: 50%;
   margin: 0 12px;
}

.more__user-jobs{
   margin-top: 56px;
   text-align: center;
}

.users{
   position: relative;
   top: -40px;
}

.users__jobs{
   display: flex;
   align-items: center;
   border-radius: 6px;
   background: var(--white); 
}

.users__jobs-logo {
   width: 140px;
   height: 140px;
   flex-shrink: 0;
}

.user__jobs-about{
   display: flex;
   justify-content: space-between;
   padding: 0 40px;
   align-items: center;
   flex: 1;
}

.jobs__info{
   display: flex;
   flex-direction: column;
   gap: 13px;
}


.users__details{
   margin-top: 32px;
   padding: 48px 43px 48px 48px;
   border-radius: 6px;
   background: var(--white);
}

.users__info,
.footer__info{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 44px;
}

.users__info-article{
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.jobs__about{
   margin-top: 40px;
}

.jobs__about-subtitle{
   margin-top: 28px;
}

.jobs__about-lists{
   margin-top: 24px;
}

.lists__selections{
   display: flex;
   gap: 32px;
   align-items: flex-start;
}

.list__selection{
   width: 4px;
   height: 4px;
   background: #5964E0;
   border-radius: 50%;
   margin-top: 9px;
}

.selection__number{
   width: 4px;
   height: 4px;
   color: #5964E0;
   margin-top: 2px;
}


.users__footer{
   border-radius: 6px;
   background: var(--white);
   padding: 23px 0;
}

.footer__info{
   margin-bottom: 0;
}

.footer__info-subs{
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.new__main{
   display: flex;
   flex-direction: column;
   gap: 30px;
   border-radius: 4px;
}

.new__main-head,
.new__main-form
{
   background: var(--white);
   border-radius: 4px;
}

.new__main-head{
   padding: 10px;
   text-align: center;
}

.new__main-head h2{
   color: var(--very-dark-blue);
   font-size: 27px;
   font-weight: 600;
}

.new__main-form{
   padding: 30px;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.form__id{
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.form__id span{
   font-size: 18px;
   font-weight: 600;
   color: var(--very-dark-blue);
}

.form__input{
   width: 100%;
   padding: 8px 10px;
   border: 1px solid var(--light-violet);
   background: var(--white);
   color: var(--very-dark-blue);
   border-radius: 8px;
   font-size: 17px;
}

.form__input:focus{
   outline: 2px solid var(--very-dark-blue);
}

.new__main-type{
   position: relative;
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--light-violet);
   padding: 10px 8px 10px 10px;
}

.new__main-selects,
.fa-angle-down{
   color: var(--very-dark-blue);
}

.new__main-select{
   position: absolute;
   width: 100%;
   top: 40px;
   left: -1px;
   background: var(--white);
   z-index: -1;
   opacity: 0;
   transition: all 0.3s;
}

.new__main-select.visible{
   opacity: 1;
   z-index: 1;
}

.new__main-option{
   width: 100%;
   white-space: nowrap;
   border: 1px solid var(--light-violet);
   padding: 6px;
   cursor: pointer;
}

.fa-angle-down{
   cursor: pointer;
}

.new__main-btn{
   margin-top: 15px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 15px;
}

.new__main-time > label > textarea{
   background: red;
   padding: 0;
   width: 100%;
   text-align: left;
   margin: 0;
}

.lists_page{
   margin: 30px 0;
   display: flex;
   flex-direction: column;
   gap: 20px;   
}

.add_New_List{
   margin-top: 10px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}