@font-face {
    font-family: carisma;
    src: url(font/carisma.ttf);
}
@font-face {
    font-family: charlotte;
    src: url(font/charlotte.ttf);
}
body {
    margin: 0;
    padding: 0;

    min-width: 1300px; 
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}
iframe{
    width: calc(100% - 35px);
    height: calc(100% - 25px);
    border: none;
    top: 25px;
    left: 35px;
    position: absolute;
}
#consol {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: rgb(28,34,43);
    color:orangered;
    padding-left:3px;
    font-size:70%;
    z-index:5;
    max-height:300px;
    overflow-y:auto;
}

#SideBar {
    /* height: calc(100vh); */
    width: 40px;
    /* background: linear-gradient( #379be6, #61b4f3); */
    background-blend-mode: multiply,multiply;
    background: rgb(255, 255, 255);
    border-radius: 0px 10px 10px 0px;
    position: absolute;
    margin-top: 100px;
    font-size: 110%;
    box-shadow: 0 0 21px -15px #000000;
        transition: all 0.2s ease-in;
    /* box-shadow: 11px -2px 20px -15px rgb(0, 0, 0); */
    z-index: 9;
    /* transition: all 0.5s ease; */
}
#SideBar p{
    display: none;
 

}
#SideBar:hover{
    width: auto;
    /*background: #3c3c3c;*/
    box-shadow: 0 0 29px -15px #379be6;
}
#SideBar:hover p{
    width: auto;
    display: inline-block;
    font-size: 100%;
    /* color: rgb(255, 255, 255); */
    padding: 0px 10px;
}

#TopBar {
height: 25px;
    width: 100vw;
    /* background: rgb(255, 255, 255); */
    background-color: rgb(255, 255, 255);
    display: flex;
    position: absolute;
    flex-flow: row;
    right: 0;
    /*box-shadow: 0px 4px 17px -11px rgb(97, 180, 243);*/
    top: 0;
    padding-right: 10px;
    /* top: 45px; */
    /* left: 45px; */
    z-index: 9;
    /* box-shadow: 0px 0px 2px 0px rgb(70, 70, 70); */
}
#ThrBar #Print{
    position: absolute;
    right: 45px;
    color: #383737;
}
#ThBar {

    display: flex;
    flex-flow: row;
    color: black;
    box-shadow: 0px 2px 2px -2px rgb(70, 70, 70);
    /* padding-left: 15px; */
    left: 45px;
    top: 25px;
    position: absolute;
    z-index: 8;

}

#ThrBar {
    height: 40px;
    width: 100vw;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-flow: row;
    color: black;
    box-shadow: 0px 7px 18px -16px rgb(0, 0, 0);
    /* box-shadow: 0px 3px 2px -3px rgb(70, 70, 70); */
    /* padding-left: 15px; */
    /* left: 45px; */
    top: 25px;
    position: relative;
    z-index: 9;
    border-bottom: 1px solid rgb(222, 218, 218);
    /* overflow: scroll; */
    overflow-x: auto;
}
    #ThrBar *:not(input, select) {
        padding-right: 20px;
        padding-left: 20px;
        font-size:90%;
        cursor:pointer;
    }
    #ThrBar input[type="number"] {
        width: 5em;

    }
#Front {

    display: block;
    margin: 0;  
    height: 100%;
    width: 100%;
    flex-direction: column;
    color: #383737;
    transition: all 0.5s ease;

}
.FrontPanel {
    margin: 2%;
    display: inline-block;
    /* background: rgb(251, 251, 251); */
    /* padding: 0px 5px; */
    /* margin: 0px auto auto; */
    /* box-shadow: 0px 0px 55px -40px #444444; */
    /* flex-direction: row; */
    /* text-align: center; */
    /* border-bottom: 0.5px solid #4e4d4d; */
    vertical-align: top;
    /* border-top: 0.5px solid #4e4d4d; */
    border-radius: 13px;
}

#Content {

    
    margin:0;

    overflow: auto;
        background-color: rgb(251, 251, 251);

}
#ClContent {
    height: calc(100% - 45px);
    width: 100%;
    display: flex;
    overflow:auto;
}
#Title {
        color: #3c3c3c;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
        margin-left: 63px;
    letter-spacing: 5px;
  /*  border-bottom: 1.5px solid;*/

}
#LogName{
    color: white;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    /* letter-spacing: 0px; */
    position: absolute;
    right: 5px;
    padding: 5px;
    margin: 3px;
    border-radius: 20px;
    height: 9px;
    background: rgb(51, 51, 51);
}
.PopUp{
    position: absolute;
    z-index: 15;
    display: flex;
    background-color: #f5f5f575;
    height: 100%;
    width: 100%;
}
.PopCase{
    display: flex;
    flex-direction: column;
    margin: auto;
    background: rgb(255, 255, 255);
    padding: 7px;
    border-radius: 16px;
    /* box-shadow: 0 0 2px 0px #000000; */
    box-shadow: 0 0 79px -37px #000000;
}




.PopTitle{
    float: left;
    padding: 5px;
    color: #e6baba;
    font-size: 80%;
    /* padding-right: 20px; */
    /* width: 300px; */
    color: rgb(104, 103, 103);
    
}
.PopClose{
    background-color: rgba(231, 33, 89, 0);
    color: #444444;
    float: right;
    padding: 2px;
    font-size: 125%;
    margin-left: 20px;
    cursor: default;
    font-weight: bold;
    padding-right: 10px;
    padding-left: 10px;
    border-top-right-radius: 2px;
    border-radius: 13px;
}
.PopClose:hover{
        background-color: #e72159;
        color: white;
}
.PopDelete{
    background-color: #e72159;
    color: #f3f3f3;
    float: left;
    padding: 5px;
        font-size: 80%;
    margin-left: 5px;
    cursor: default;
    border-radius: 20px;
}
.PopSave{
    background-color: #519348;
    color: #f3f3f3;
    float: right;
    padding: 5px;
        font-size: 80%;
    cursor: default;
    margin-right: 10px;
    border-radius: 20px;
}
.PopInside{
background-color: white;
    display: block;
    /* margin: auto; */
    /* width: 800px; */
    max-height: 88vh;
    overflow: auto;
    /* box-shadow: 0px 0px 30px -10px; */
    /* box-shadow: 1px 8px 30px 0px #000000; */
    padding: 1px;
    min-width: 310px;
    max-width: 100vw;
}



.Alert{


    color: white;
    display: flex;
    text-align: center;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    padding-left: 30px;


}
a{
    color: #e72159;

}
.blr{
filter: blur(2px);
}
.section{
    position: absolute;
        padding-top: 30px;
        padding-left: 45px;
    /*height: calc(100vh - 70px);*/
    height: calc(100% - 65px);
    width: calc(100vw - 45px);
    overflow: auto;
    /*background: rgb(251, 251, 251);*/
    text-align: center;
    animation: Show 0.1s linear;
    animation-fill-mode: forwards;


}

#drop {
    margin: auto;
    
    padding:50px;
    background-color: #b2b9c4;
    display: flex;
    text-align: center;
    font-size: 20px;
    color: #364151;
    justify-content: center;
    align-items: center;
    box-shadow: inset 1px 1px 8px 0px rgba(0,0,0,0.75);
}
.drop {
    height: 50vh;
    width: 80vw;
    display: flex;
    text-align: center;
    font-size: 20px;
    color: #364151;
    justify-content: center;
    align-items: center;
    background-color:#b2b9c4;
    box-shadow: inset 1px 1px 8px 0px rgba(0,0,0,0.75);
}

paper{
    background: white;
    box-shadow: 0px 4px 10px -7px #2f2f2f;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    border-radius: 16px;
}
.EmployeeEdit input,.EmployeeEdit select{
    border: none;
    /* background-color: #f3f3f3; */
    font-size: 120%;
    margin: 10px;
    border-bottom: 1px solid #dad7d7;
    /* box-shadow: 0px 0px 15px -5px grey; */
}

.popSelected button{
margin-right: 5px;
}

.selActive {
        /* box-shadow: 0px 0px 4px black; */
    /* transform: scale(1.06,1.1); */
    /* border: 4px solid #516ea0!important; */
    box-shadow: 0px 0px 0px 2px #5c80bd;
    /* outline: 2px solid black; */
    /* z-index: 1; */
    position: relative;
    background-color: #c4dcf1 !important;
}
.Calendar{
     -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.miniTask{
    border-bottom: 1px solid #dedede;
    margin: 10px;
    padding: 4px;
}
.taskAdd{
    margin: 10px;margin-bottom:30px;box-shadow: 0px 0px 2px;
}
.dayTask:hover{
box-shadow: inset 0px 0px 1px 3px #ff0000a6;
}
.dayTask[cc="g"]{
    box-shadow:inset 0px 0px 1px 3px rgba(69, 146, 30, 0.65);
}
.dayTask[cc="r"]{
    box-shadow:inset 0px 0px 1px 3px rgba(255, 0, 0, 0.65);
}

.CalOldMon{
    padding: 10px;
    font-size: 120%;
    cursor: default;
}

.extraTask{
    padding: 5px;
    margin: 25px;
    border-bottom: 1px solid grey;
}

.Donat{

height: 285px;
width: 100%;
}
.DonatM{
 
    height: 285px;
     margin:0px;
}


.RoomCase{
	display: flex;
	border-bottom:  rgb(230,230,230) solid 1px;
	flex-flow: row wrap;


}
.RoomCaseN{
	display:flex;
	flex-flow: column;
	height: 30px;
	width: 80px;
	text-align: center;
	font-size: 100%;
 justify-content: center;
  align-items: center;


}
.RoomCaseC{
	display:flex;
	flex-flow: row wrap;
	height: 45px;

	text-align: center;
	font-size: 18px;
 justify-content: center;
  align-items: center;

}
.RoomCase2{
	display:flex;

	height: 45px;
	text-align: center;
	font-size: 18px;
 justify-content: center;
  align-items: center;
  margin: 5px;
}
.RoomCase3{

	text-align: center;
	font-size: 60%;
}




/*Buttons*/

.button {
    height: 45px;
    width: 45px;
    border: none;
    border-bottom: 1px solid transparent;

}
.button:hover{
    transform: scale(1.1);
   border-bottom: 1px solid #e72159;

}
    .button .tooltiptext {
        visibility: hidden;
        white-space: nowrap;
        background-color: rgb(28,34,43);
        color: #fff;
        text-align: center;
        left: 38px;
        padding: 16px;
        /* Position the tooltip */
        position: relative;
        z-index: 1;
    }

    .button:hover .tooltiptext {
        visibility: visible;
        
    }

.button2 {
    height: 45px;
    border: none;
    background-color: transparent;
    
}

    .button2:hover {
           background-color: #ffffff;

    box-shadow: 0px 0px 2px #3b3d40;

    }
.button:focus{
outline-color: white;

}
.button:active{
outline-color: white;

}
.buttonFront {
    font-size: 75%;
    display: inline-block;
    flex-direction: column;
    margin: 10px 15px;
    text-align: center;
    padding: 5px;
    font-weight: bold;
    color: #364151;
    /* color: white; */
    cursor: pointer;

}
.buttonFront:hover {
   


}
.buttonFront:hover img{

}
.buttonFront img{
display: inline-block;
    width:30px;
    filter: brightness(50%);

}
#SideBar .buttonFront{
    margin: 0;
    border-radius: 0px 5px 5px 0px;
    padding: 5px;
    /* margin-top: 15px; */
    border: none;
    /* background: #444242; */
    /* margin-right: 0px; */
    width: 100%;
    text-align: left;
    border: solid 2px #ffffff00;

}
#SideBar .buttonFront:hover {
    background: #ffffff;
    /* border-radius: 0px 5px 5px 0px; */
    /* width: calc(100% - 20px); */
    border: solid 2px #379be6;
    box-shadow: 0px 0px 18px -12px #055b9c;

}
#SideBar .buttonFront:hover img{
filter: brightness(0%);

}
#SideBar .buttonFront img{
display: inline-block;
    width: 20px;
    filter: brightness(40%);

}
  #SideBar .buttonFront:hover p {
     color: #379be6;


    }
.buttonSide {
    display: inline-block;
    font-size: 110%;
    margin: 0px 0px;
    text-align: center;
    padding: 5px;
    cursor: default;
    border-bottom: 1px solid white;
      transition: all 0.5s ease;
}
.buttonSide:hover {
    
    background: transparent;
    border-bottom: 1px solid #e72159;

}
.buttonSide:hover img{

}
.buttonSide div{
    
display: none;

}
.buttonSide:hover div{
    
display: block;

}
.buttonSide img{
display: inline-block;
    width:30px;
    position: relative;

}
.ButtonType, .ButtonStore{
    cursor: default;
}

.ButtonType:hover, .ButtonStore:hover {
   transform: scale(1.05, 1.05);
   box-shadow: 0px 0px 3px black;
   border: 1px solid black;
}


.ButtonStatEq{
    padding: 5px;
    margin: auto;
}

.tdExtra:hover{
transform: scale(1.05, 1.05);
   box-shadow: 0px 0px 3px black;
   border: 1px solid black;
   cursor: default;
}

.EmployeeB{
     cursor: default;
}
.EmployeeB:hover{
transform: scale(1.05, 1.05);
    box-shadow: 0px 0px 3px black;
    border: 1px solid black;
    background: #7a808a;
    color: white;
}

.addTask{
    color: white;
    background: grey;
}


.SwitchB {
    display: inline-block;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}

#menu {
	background: url(Icons/Menu32.png) no-repeat;
	background-size: 18px auto;
	background-position: center; 
    height: 35px;
}

#home {
	background: url(Icons/Home32.png) no-repeat;
	background-size: 18px auto;
	background-position: center; 
}
#home:hover{
	background-color: rgb(53,53,53);
}
#cleaning {
	background: url(Icons/Housekeeping32.png) no-repeat;
	background-size: 18px auto;
	background-position: center; 
}
#cleaning:hover{
	background-color: rgb(53,53,53);
}
#storage {
	background: url(Icons/Cardboard32.png) no-repeat;
	background-size: 18px auto;
	background-position: center; 
}
#storage:hover{
	background-color: rgb(53,53,53);
}
#DayStart {
    background: url(Icons/Sheets96.png) no-repeat;
    background-size: 18px auto;
    background-position: center; 
}
#DayStart:hover{
    background-color: rgb(53,53,53);
}
#payments {
    background: url(Icons/payment96.png) no-repeat;
    background-size: 18px auto;
    background-position: center; 
}
#payments:hover{
    background-color: rgb(53,53,53);
}
#work {
    background: url(Icons/Calendar32.png) no-repeat;
    background-size: 18px auto;
    background-position: center;
}

    #work:hover {
        background-color: rgb(53,53,53);
    }
#Tax {
    background: url(Icons/Tax32.png) no-repeat;
    background-size: 18px auto;
    background-position: center;
}

    #Tax:hover {
        background-color: rgb(53,53,53);
    }
#Reservations {
    background: url(Icons/Page32.png) no-repeat;
    background-size: 18px auto;
    background-position: center;
}

    #Reservations:hover {
        background-color: rgb(53,53,53);
    }
#RoomStatus {
    background: url(Icons/Hotel32.png) no-repeat;
    background-size: 18px auto;
    background-position: center;
}

    #RoomStatus:hover {
        background-color: rgb(53,53,53);
    }

.scale {
    overflow: visible;
    height:auto;
}




p{
    font-size: 8px;
    line-height: 8px;
    margin: 0;
}

/*CheckBox and inputs*/
*:focus {
    outline: none;
}

input[type="month"]::-webkit-clear-button {
    display: none;
}

/* Removes the spin button */
input[type="month"]::-webkit-inner-spin-button {
    display: none;
}

/* Always display the drop down caret */
input[type="month"]::-webkit-calendar-picker-indicator {
    color: #e72159;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}
input[type="date"]::-webkit-clear-button {
    display: none;
}

/* Removes the spin button */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* Always display the drop down caret */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #e72159;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
   background: transparent;
}
::-webkit-calendar-picker-indicator:hover {
    background: none;
}

.inputtext{
    /* height: 15px; */
    color: darkgrey;
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    display: inline-flex;
    color: #525050;
    background: rgb(255, 255, 255);
    border-radius: 21px;
    margin: 5px 10px;
    padding: 5px 10px;
    font-size: 75%;
    /* width: 50px; */
    box-shadow: 0px 0px 6px -3px grey;
    /* cursor: default; */
    font-weight: bold;
    background: #f9f8f8;
}
    .inputtext:hover:not(.popSelected) {
    background-color: #f3f3f3;
    box-shadow: 0px 0px 3px grey;


    }

    .inputtext input {
    border: none;
    /* display: inline-block; */
    background: white;
    font-size: 140%;
    border-radius: 22px;
    padding-left: 5px;
    cursor: pointer;
    margin-left: 5px;
    color: #232222;
    font-family: 'Roboto', sans-serif;
    }
    .inputtext select {
    border: none;
    /* display: inline-block; */
    background: white;
    font-size: 130%;
    color: #232222;
    font-family: 'Roboto', sans-serif;
    border-radius: 20px;
    /* padding: 3px; */
    }

input[type=date] {
    position: relative;
    width: auto;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=month] {
    position: relative;
}
#Search{
    position: absolute;
    right: 0;
    top :4px;
    color: white;
    height: 35px;
       padding-left: 5px;
        font-size: 120%;

        background: none;
        color: #e72159;
        font-family: Arial, Helvetica, sans-serif;
        background: rgba(256,256,256,0.9);
    box-shadow: inset 1px 1px 4px black;
}


textarea {
font: 100% 'Open Sans', Arial, sans-serif;
overflow-y: hidden;
border: none;
   
}
textarea:focus {
        outline: none !important;
border: 1px solid #ababab;
    box-shadow: 0 0 10px #929292;
   
}
.taskEdit{
 width: calc(100% - 30px);
    display: inline-block;
    height: 1em;
    margin-left: 5px
}

input, select{
    border:none;
}
input:focus, select:focus{
    border: none;
}





select *{
    font-size:110%;
}
option{
    color: black;
}
/*Tables*/
.bold *{
    font-weight:700;
}
.checked{
    text-decoration: line-through;
    color: grey;
}
/*Checkboxes styles*/
input[type="checkbox"] {display: none !important; }

input[type="checkbox"] + label {
    display: inline-block;

    
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    vertical-align: top;
   
}

input[type="checkbox"] + label:last-child { margin-bottom: 5px;}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid rgb(54, 65, 81);
    border-radius: 4px;

  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 5px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;

  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.StandartTable {

    border-collapse: collapse;
    margin:15px;
 
    
}
    .StandartTable tbody {

    }
    .StandartTable .title2 > td,
    .StandartTable .title2 {
        font-size: 130%;
        border: 1px transparent;
    }
    .StandartTable th,
    .StandartTable td,
    .StandartTable tr {
        text-align: left;
        border: solid 1px black;
        font-size: 95%;
        padding: 5px;
        white-space: nowrap;
    }
    .StandartTable input{
        margin:0px;
        padding:0px;
        background-color:transparent;
    }

    .StandartTable:not(#NewItem) input {
        width: 50px;
        text-align: center;
    }
    .StandartTable input, select {
        font-size: 100%;
    }
    .StandartTable .empty {
            border-bottom: 1px solid white;
             
    }

.DarkTable{
    border-collapse: collapse;
}


.DarkTable th, .DarkTable td, .DarkTable tr {
    text-align: left;
    border: solid 1px #4e4e4e;
    font-size: 95%;
    padding: 5px;
    color: #c1c1c1;
    white-space: nowrap;
    background: #3c3c3c;
    height: 1.3em;
}
.LightTable{
    border-collapse: collapse;
        margin: 15px;
}


.LightTable th, .LightTable td, .LightTable tr {
    text-align: center;
    border: solid 1px #dadada;
    font-size: 95%;
    /*padding: 3px 10px;*/
    color: black;
    white-space: nowrap;

}
.LightTable th{
    background: white;
    color: #6b6b6b;
    text-align: left;
        padding: 10px;
}
.LightTable .title2 > td,
    .LightTable .title2{
            font-size: 115%;
    text-align: left;
    color: #565656;
    border: 1px transparent;
    }

.LightTable tbody tr:nth-child(odd) {
  background-color: rgb(251, 251, 251);
}

.Inco{
    margin: 1px;
    display: inline-table;
       border: 2px solid rgb(222, 221, 221);
}
.Inco:hover{
        border-color: #03A9F4;
box-shadow: 0 0 10px -3px #03A9F4;
    cursor: pointer;
}
.Inco th{
    text-align: center;
}
.Inco .baseRow {
    /* font-size: 105%; */
   color: #464444;
    font-weight: bold;
}
.Inco th.baseRow {
      font-size: 110%;


    }
    .baseLine .MoGoal{
    text-align: center;
    width: 50%;
    font-size: 100%;
    font-weight: bold;
    color: #6b6b6b;
    font-family: 'Roboto', sans-serif;
    }
.FrontPanel th,.FrontPanel  td,.FrontPanel  tr{
border-color: white;
}

.ArrivalTime td{
    white-space: normal;
}

.Cleaning tbody td{
    text-align: center;
}
.Cleaning input {
    font-size:120%;
    
}
.copy tbody td{
    text-align: center;
}
.copy input {
    font-size:120%;
    
}
.Calendar td{
     text-align: center;
}

table.EditTable {
    border-collapse: collapse;
}

    table.EditTable th,
    table.EditTable td,
    table.EditTable tr {
        text-align: center;
        border:solid 1px grey;
    }

#FullList {
    border-collapse: collapse;
}

    #FullList th,
    #FullList td,
    #FullList tr {
        text-align: center;
        border: solid 1px grey;
        padding: 0px;
    }
#FullList input{
    width:50px;
    font-size: 14px;
    text-align:center;
}
    #FullList .title {
        font-weight: 700;
    }
/*Animations*/


.Ahide {

    animation: Hide 0.1s linear;

    animation-fill-mode:forwards;
    overflow: visible;

}
.Ashow {



}
.TBshow {

    transform:translateY(80px);
   
}
@keyframes Hide {
    0% { 
        z-index: 4;
        opacity:1;
        transform:translateY(0) scale(1);
overflow: hidden;
    }
        90% { 

        transform:translateY(0) scale(1);

    }

    100% {
        z-index: 4;
        opacity:0;
        transform: translateY(100vh) scale(1);
       overflow: hidden;

    }
}
@keyframes Show {

    0% {
        z-index: 5;
        overflow: hidden;
                opacity:0;
     
    }

    100% {
opacity:1;
        
z-index: 5;
overflow: auto;
    }
}


.l {
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(256, 256, 256, 1);
}
.ltext {
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    margin-top: 65px;
    display: flex;
    font-size: 36px;
    -webkit-font-smoothing: antialiased;
    /* text-shadow: 0px 0px 2px rgb(53,53,53); */
    color: #444444;
    justify-content: center;
    align-items: center;

}
.loader {
    display:block;
    color: #e72159;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.lds-ring {
/*  display: inline-block;
  position: relative;
  width: 104px;
  height: 104px;*/
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    /* box-shadow: 0 0 6px 1px #27ecff; */
    margin: 11px;
    border: 3px solid rgb(255, 255, 255);
    border-radius: 50%;
    animation: lds-ring 2.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) infinite;
    /* border-color: #379be6 #379be6 rgba(249, 249, 249, 0) rgba(97, 180, 243, 0); */
    box-shadow: 2px -2px 0px 0px #1075c1, inset -1px -1px 0px 0px #379be6;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.DatePop{
    display: block;
    position: fixed;
    height: 300px;
    width: 400px;
    background: green;
}



/*-------------------------------------StampMachine----------------------------------------------------*/

.TimTop{
    /* border: 1px solid #a0a0a0; */
    cursor: default;
            background: rgb(53,53,53);
    color: white;
    border-radius: 20px 20px 0px 0px;
}

.NumButt{
    width: 50px;
    height: 50px;
    font-size: 150%;
    /* border: 1px solid #a0a0a0; */
    cursor: pointer;
    /* background: linear-gradient(45deg, #379be6, #61b4f3); */
    /* background: #f5f5f54f; */
}
.NumButt:hover{

    /*box-shadow: inset 0px 0px 10px -2px;*/
        box-shadow: 0px 0px 16px -9px #61b4f3;
    color: #3c3c3c;
    border-radius: 20px;
}
.StampScreen{
    font-size: 200%;
    width: 250px !important;
    text-align: center;
    /* border: 2px solid #389be6; */
    border-radius: 0px 0px 20px 20px;
    /* color: #379be6; */
    /* background: #61b4f3; */
    box-shadow: inset 0px -2px 9px -8px #065894;
   
}

.StampMachine{
    background: #ffffff;
    color: rgb(53,53,53);
    /* background: linear-gradient(45deg, #379be6, #61b4f3); */
    margin: 10px;
    border-radius: 23px;
    padding: 0px;
    margin-right: 0px;
    display: inline-block;
    /* border: solid 2px; */
        box-shadow: 0px 5px 18px -15px #b5b5b5;

    vertical-align: top;
    transition: all 0.2s ease-in;
}
.StampMachine:hover{
       box-shadow: 0px 5px 18px -11px #379be6;
}
.smButton{
    position: relative;
    display: inline-block;
    background: #e72159;
    padding: 5px;
    color: #ffffff;
    cursor: default;
}


.WorkDay{
    height: 1.2em;
}
.WorkDay:hover{
    outline: 2px solid;
}
.WorkTimeBox{
    background-color: #9c8f74;
    position: absolute;
    color: white;
    box-shadow: 0px 0px 4px 0px black;
    border-radius: 2px;
    /* width: 554.699165px; */
    margin-top: -8px;
    cursor: default;
    text-align: center;
}
.WorkTimeBoxBack{
background-color: #8f989a;
    position: absolute;
    color: white;
    box-shadow: 0px 0px 4px 0px black;
    border-radius: 2px;
    /* width: 554.699165px; */
    margin-top: -8px;
    cursor: default;
    text-align: center;
}

.TimeCalendarT{
cursor: default;
    display: inline-table;
}
.TimeCalendar{

}
#EditWork {

}
#EditWork *{
    font-family: 'Roboto';
}

#EditWork input{
border: none;
    color: #3e3e3e;
    background: #ffffff;
    margin: 10px;
    border-radius: 5px;
    height: 1.5em;
    font-size: 1.2em;
    box-shadow: inset 0px 0px 2px;
    display: inline-block;
}
.Cllred td, .Cllred th{
        background-color: #e1eef5 !important; 
}

.labl{
    background: #eaeaea;
    display: block;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
}

.checkCSV{
       margin: 5px;
    padding: 10px;
    border: 2px solid #827768;

}
.checkCSV p{
      margin-left: 10px;
    font-size: 100%;
    line-height: 100%;
    display: inline-block;
    font-weight: bold;
    /* background: #adadad; */
    color: #444444;
}



.frontTask{
    /* background: #dcdcdc; */
    color: rgb(53,53,53);
    margin: 10px;
    border: 2px solid;
    margin-left: 0px;
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
}
.frontTskTitli{
    /* border: 1px solid #a0a0a0; */
    cursor: default;
    color: white;
        background: rgb(53,53,53);
    border-radius: 8px 8px 0px 0px;
}


.tskText{
       
               background: white;
    /*box-shadow: inset 0px 0px 5px 0px;*/
        cursor:pointer;
            padding: 5px;
}

.tskText:hover{
        background: #ffffff;
    box-shadow: 0px 0px 50px 10px #ffffff85;
    outline: 1px solid #c7c7c7;
    /* border: 5px solid #f5f5f5; */
    position: relative;
   
}
.DownloadCSV{
margin: 10px;
    background: #404040;
    text-align: center;
    color: white;
    padding: 10px;
    cursor: default;
    border: 1px solid #e6e6e6;
}
.DownloadCSV:hover{
background: #67b766;
}


/*-------------------------Eqq-------------------------------------------*/
#PopEqqItem{
        /* width: 300px; */
    text-align: center;
    background: rgb(255, 255, 255);
}
.PopEqqTitle{
    padding: 10px;
    /* margin: 10px; */
    color: #444444;
    font-size: 110%;
    text-align: center;
    /* background: #ffffff; */
}
.EqqCoverPlace{
    /* padding: 5px; */
    display:inline-block;
    /* background: #f9f8f8; */
    margin: 5px;
    /* margin-top: 5px; */
    /* text-align: center; */
    color: #414141;
    /*border-bottom: 1px solid #dedede;*/
    /* border-radius: 5px; */
    /* border-top: 1px solid #dedede; */

}
.EqqCoverPlace:hover{
            opacity: 1 !important;
}

.EqqMinButton{
display: inline-block;
    /* background: #ffa839; */
    /* background: #e8e8e8; */
    margin: 0;
    /*font-size: 110%;*/
    background: transparent;
    padding: 2px;
    padding-right: 8px;
    color: #444444;
    /*box-shadow: 0px 0px 3px -1px #000000;*/
    border-radius: 20px;
    cursor: default;
}

.EqqCoverPlac .EqqMinButton:hover{
    box-shadow: 0px 0px 7px -1px #000000;
    background: #f3f3f3;
}
.EqqCoverPlace .EqqMinButton{
    margin: 10px;
    box-shadow: 0px 0px 3px -1px #000000;
}
.EqqMinButton input, .EqqMinButton select{
    text-align: right;
    font-size: 100%;
    padding: 10px;
    background: transparent;
    border-radius: 20px;
    padding-right: 5px;
    margin: 1px;
    margin-right: -3px;
    color: #444444;
    transition: all 0.5s ease;
}
.EqqMinButton input[type="number"]{
        width: 2em;
 font-size: 120%;
 font-weight: bold;
}
.EqqMinButton:hover input{
    background: white;
    /*margin-right:0px;*/
}
.hovEd:hover{
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 0px 2px rgb(95, 116, 148), 0 0px 13px 2px rgb(159, 186, 226);
    background: rgb(255, 255, 255);

}
.EqqEdit .EqqMinButton input,.EqqEdit  .EqqMinButton select{
    background: white;
    text-align: center;
}
.EqqEdit .EqqMinButton{
    /*background: #e8e8e8;*/
}
#PopEqqItem p{
        font-size: 70%;
    /* line-height: 10px; */
    margin: 0;
}
.EqqItem {
    cursor: pointer;
}
.thumb-image{

    width: 300px;
    height: 300px;
    position: relative;
    padding: 0px 3px;
    border-radius: 10px;
}
.EqqSett{
      height: 20px;
    /* float: left; */
    filter: brightness(30%);
    margin: 3px;
}

.PopEqqSettinPanel{
           background: #f9f8f8;
    border-radius: 5px;
    margin: 10px;
}
.LightTable .PopEqqSettinPanel{
margin: unset;
background: unset;
}

.EqqPhotoPanel{
       background: #f9f8f8;
    border-radius: 5px;
    margin: 10px;
}
.popImage{
    height:300px;
        width: 300px;
    display: none;
}
.EqqPhoto{
    height: 30px;
    filter: brightness(20%);
}
.EqqPhotoC{
 display: inline-block;
    height: 30px;
    /* float: left; */
    /* position: absolute; */
    filter: brightness(30%);
    /* margin: 10px; */
    /* z-index: 2; */
}
.EqqEdit{
    display: block;
    /* font-weight: bold; */
    background: #f5f5f5;
    margin: 8px;
    /* width: 300px; */
    padding: 8px;
    border-radius: 6px;
    color: #5a5a5a;
    /* border-radius: 5px; */
    text-align: center;
    /* border-bottom: 1px solid #dedede; */
}
.svgCase{
    position: absolute;
    /*background: rgb(54, 65, 81);*/
    margin: 10px;
    /* margin-right: 0; */
   
}
svg{
  /*  background: rgba(223, 245, 245, 0.43);*/

}
.PriceSlider{
    height: 50px;
    bottom: 0;
    padding: 2px;
    border-radius: 4px;
    position: absolute;
    background: rgb(78, 111, 160);
    pointer-events: none;
    color: white;
    font-size: 12px;
    writing-mode: tb;
}
.PriceBest{
    height: 50px;
    padding: 2px;
    bottom: 0;
    font-size: 12px;
    position: absolute;
    background: rgb(130, 119, 104);
    pointer-events: none;
    color: white;
    writing-mode: tb;
}
.PriceDate{
width: 20px;
    height: 50px;
    bottom: -50px;
    font-size: 80%;
    position: absolute;
    color: rgb(54, 65, 81);
    /* transform: rotate(45deg); */
}
.svgHoverPriceBox{
    height: 100px;
    position: relative;
    /* z-index: 2; */
    margin-bottom: 70px;
    /* background: #f1f1f1; */
}

input[type="range"] {
writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 8px;
    height: 125px;
    bottom: 0;
    position: absolute;
    padding: 0 5px;
    opacity: 0;
}
.weekBox{
position: absolute;
    /* background: #b2b9c4; */
    height: 200px;
    /* bottom: -100px; */
    z-index: -1;
    bottom: 0px;
    border-left: 1px solid #d5d4d0;
}
.monthBox{
    position: absolute;
    height: 260px;
    z-index: -3;
    /* background: #f9f8f8; */

           box-shadow: 0 0 35px -30px black;
    /* bottom: -100px; */
    /* background: linear-gradient(to right, rgb(229,252,250) 0%,#f9f8f8 50%,rgb(230, 253, 251) 100%); */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    letter-spacing: 5px;
    bottom: -50px;
    /* border-left: 1px solid #e72159; */
    /* border-right: 1px solid #e72159; */
}
/*.svgHoverPriceBox:hover .monthBox{

        z-index: -2;
    box-shadow: 0 0 35px -10px black;
    border-radius: 20px;
}*/

.PriceMonitor{
/*background: #f3f3f3; */
    /* border-radius: 3px; */
    /* padding: 5px; */
}

.PriceMonitor input[type="number"]{
padding: 2px 5px;
    font-size: 100%;
    width: 40px;
    font-family: 'Roboto', sans-serif;
    border-radius: 4px;
    margin: 2px;
    box-shadow: inset 0 0 2px black;
}
.PriceMonitor input[type="date"]{
padding: 2px 5px;
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    border-radius: 4px;
    margin: 2px;
    box-shadow: inset 0 0 2px black;
}
.PriceMonitor select{
        box-shadow: inset 0 0 2px black;
    border-radius: 3px;
    padding: 3px;
}
.PriceMonitor div{
    border-bottom: 1px solid #f3f3f3;
    padding: 10px;
    margin: 5px;
    /* border-radius: 3px; */
}
.PriceHoverData{
    position: absolute;
    color: white;
    background: rgb(93, 192, 192);
    border-radius: 5px;
    padding: 10px;
    z-index: 10;
}
.UploadRates{
    padding: 10px;
    text-align: center;
}
.UploadRates p{
    font-size: 18px;
    line-height: unset;
}
.PopButton{
display: inline-block;
    color: white;
    margin: 10px;
    padding: 5px;
    border-radius: 10px;
    width: 60px;
    cursor: pointer;

}

.SideBox{
display: inline-block;
}
.SideCase{
    position: fixed;
    z-index: 5;
    
    flex-direction: column;
    max-height: calc(100% - 80px);
    overflow: auto;
    max-width: 700px;
    background: rgb(255, 255, 255);
    background-blend-mode: multiply,multiply;
    border-radius: 10px 0px 0px 10px;
    box-shadow: 0 0 5px -1px black;
    right: 17px;
}
.SideMoths{
padding: 14px;
    min-width: 25%;
    font-size: 15px;
    text-align: left;
    background: #f9f8f8;
    box-shadow: 0px 0px 6px -4px #000000;
    display: inline-flex;
    border-radius: 6px;
    margin: 5px;
}

.SideTotal{
        padding: 10px;
    font-size: 130%;
}
.SideTotal p{
      font-size: 180%;
    line-height: unset;
        color: #e64444;
}
.SidePrc{
    font-size: 110%;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
    background: white;
    padding: 4px;
    box-shadow: 0 0 3px 0px #a7a7a7;
}
.SidePrc input{
        width: 2.1em;
    padding-right: 2px;
    font-size: 100%;
    text-align: center;
}
.SideMoths .MoTotal{
     font-size: 135%;
    padding: 5px;
    text-align: center;
}
.MoGoal:hover{
      border-radius: 5px;
    box-shadow: inset 0 0 1px 2px #03A9F4;
}
.moBox{
 text-align: center;
    white-space: nowrap;
}
.smallpie {
  width: 30px;
  background: #dcdcdc;
  border-radius: 50%;
}

.smallpie circle {
  fill: none;
  stroke: white;
  stroke-width: 32;
  animation: rotate 1.5s ease-in;
}
.icBox{
    width: 1.2em;
    padding: 0px 10px;
    display: inline-block;
    fill: rgb(72, 72, 72);
    vertical-align: middle;
}
.FrontPanel .icBox{
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 50px;
    fill: #61b4f3;
    background: rgb(255, 255, 255);
    transition: all 0.2s ease-in;
}
.FrontPanel .buttonFront:hover .icBox{
    background: rgb(255, 255, 255);
    box-shadow: 0 0 0px 3px #a0d5fd;

}
#SideBar .icBox{
width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 20px;
    fill: rgb(255, 255, 255);
    fill: #ababab;
    /* background: #379be6; */
    background: #fbfbfb;
}
#SideBar .buttonFront:hover .icBox{
fill: #379be6;
}

#TopBar .icBox{
        width: 1.4em;
          fill: rgb(51, 51, 51);
}

.jodit_workplace p {
    font-size: unset;
    line-height: unset;
    margin: unset;
}

.EqMailTop{
    /* height: 15px; */
    color: darkgrey;
    white-space: nowrap;
    align-items: center;
    display: flex;
    color: #525050;
    background: rgb(255, 255, 255);
    border-radius: 18px;
    margin: 5px 10px;
    padding: 5px 10px;
    font-size: 80%;
    /* width: 50px; */
    box-shadow: 0px 0px 6px -3px grey;
    cursor: default;
    font-weight: bold;
}
.EqMailTop input{
border: none;
    /* display: inline-block; */
    background: #ffffff;
    width: 100%;
    padding: 0px 10px;
    font-size: 110%;
    color: #232222;
    font-family: 'Roboto', sans-serif;
}
.SendMail{
       padding: 10px;
    background: #379be6;
    float: right;
    font-weight: bold;
    color: white;
    border-radius: 9px;
    margin: 10px;
    cursor: pointer;
}

.smartRes{
    position: absolute;
    background: #61b4f3;
    border-radius: 4px;
    padding: 3px;
    margin-left: 10px;
    display: inline;
    color: #ffffff;
    border: 1px solid;
}
.minPopSet{
    display: none;
    position: absolute;
    background: white;
    /* border: solid #e6e6e6 1px; */
    padding: 10px;
    box-shadow: 0 0 4px -2px black;
    border-radius: 29px;
}
.Clr:hover .minPopSet{
    display: inline-block;

}
.minPopSet img{
    margin: 10px;
    height: 2em;

}

.logoCase{
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
    text-align: center;
    /* position: absolute; */
    /* padding: 10px; */
    cursor: default;
    font-size: 150%;
    font-weight: normal;
    transition: all 0.2s linear;
}
.logoCase p{
    font-family: carisma, sans-serif;
    /* display: inline-block; */
    margin: 0;
    font-weight: bold;
    line-height: unset;
    color: rgb(53,53,53);
    letter-spacing: 2px;
    font-size: 100%;
}
.logoCase .uTitle{
      font-size: 50%;
}
.uTitle:after,
.uTitle:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}


.LogLoad {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    animation: spin 4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}
.lds-ring svg {
    /* background: rgba(223, 245, 245, 0.43); */
    animation: spin 4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
    height: 40px;
    /* width: 100px; */
}
.OpBooking{
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid grey;
}
.payCheck{
  text-align: center;
  cursor: pointer;
}
.payCheck svg{height: 24px;}
.payNote{
  text-align: center;
  cursor: pointer;
}
.payNote svg{height: 24px;}
.chAll{
    cursor: pointer;
}
@keyframes spin { 
0% {

  }

  50% {
                transform:rotate(180deg)scale(1.2);
  }

  100% {

          transform:rotate(360deg)scale(1);


  }
}

.blrLod{
font-family: 'charlotte', sans-serif;
   /* animation: lodT 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;*/
}
@keyframes lodT { 
0% {
         text-shadow: 0px 0px 0px rgb(53,53,53);
  }
  25%{

  }

  50% {
              text-shadow: 0px 0px 2px rgb(53,53,53);

  }

  100% {

          text-shadow: 0px 0px 0px rgb(53,53,53);
        

  }
}