@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat/Montserrat-Regular.otf);
}
@font-face {
    font-family: MontserratSemiBold;
    src: url(../fonts/montserrat/Montserrat-SemiBold.otf);
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
html{
    height: 100%;
}
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    min-height: 100%;
    position: relative;
    color: #2f2f39;
    overflow-x: hidden;
    background: #fff;
    line-height: 1.3;
    min-width: 300px;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
    position: relative;
}
ul {
    list-style: disc;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;
    margin-left: 15px;
}
table ul{
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    color: #2f2f39;
    transition: all 0.5s ease;
}
sup {
    vertical-align: super;
    font-size: smaller;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
}
td{
    border: 1px solid #d3d3d5;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}
td p{
    margin: 0;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select, button {
    vertical-align:middle;
    font-size: 14px;
    font-family: 'Montserrat', 'sans-serif';
}
p{
    display: block;
    margin: 0;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
pad{
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: normal;
}
.Loader{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #2f2f39;
    text-align: center;
    line-height: 100vh;
}
.LoaderInner{
    display: inline-block;
    width: 300px;
    max-width: 100%;
    vertical-align: middle;
    line-height: 1;
    text-align: center;
}
.Loader img{
    width: 100px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -ms-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
/* LOGIN */
.LoginBody{
    display: block;
    position: relative;
    background: #f9f9f9;
}
.LoginBack{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    background: #febd00;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 0 3px rgba(35, 31, 31, 0.5);
}
.Login{
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    line-height: 100vh;
    text-align: center;
}
.LoginInner{
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: 500px;
    max-width: 100%;
}
.LoginImg{
    display: block;
    position: relative;
    margin: 0 auto;
    margin-bottom: 30px;
    transition: all 1s ease;
    border: 10px solid rgba(255, 255, 255, .2);
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(35, 31, 31, 0.5);
}
.LoginImg:hover{
    width: auto;
    border-radius: 10px;
}
.LoginFormAdmin{
    background: #fff;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 0 3px rgba(35, 31, 31, 0.5);
}
.LoginTitle{
    font-size: 24px;
    margin: 20px auto;
    display: block;
    font-family: "MontserratSemiBold", sans-serif;
    font-weight: normal;
    color: #fff;
}
.LoginLabel{
    display: block;
    position: relative;
    text-align: left;
    margin: 10px auto;
}
.LoginLabel span{
    font-size: 13px;
    color: #b3b3b7;
    text-transform: uppercase;
    font-family: "MontserratSemiBold", sans-serif;
    letter-spacing: 2px;
}
.LoginLabel input{
    display: block;
    position: relative;
    margin: 10px auto;
    padding: 10px;
    width: calc(100% - 20px);
    border: 1px solid #cbcbcb;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(35, 31, 31, 0.5);
}
.ReturnToEmail{
    font-size: 12px;
    text-align: center;
    padding: 10px;
    font-family: "MontserratSemiBold", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.5s ease;
    cursor: pointer;
}
.ReturnToEmail:hover{
    color: #ff0052;
}
.Support{
    display: block;
    padding-top: 10px;
    font-size: 10px;
    color: #b3b3b7;
}
a:hover{
    color: #ff0052;
}
.LoginBtn{
    text-align: left;
    padding: 10px 40px;
    padding-right: 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-family: "MontserratSemiBold", sans-serif;
    letter-spacing: 1.5px;
    border-radius: 30px;
    border: 0;
    background: #ff0052;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.5s ease;
    margin: 20px auto;box-shadow: 0 0 3px rgba(35, 31, 31, 0.5);
}
.LoginBtn:hover{
    background: #2f2f39;
}
.LoginBtn i{
    margin-left: 30px;
    vertical-align: middle;
    background: #fff;
    color: #ff0052;
    padding: 10px;
    border-radius: 20px;
    font-size: 18px;
}
.LoginBtn:hover i{
    color: #2f2f39;
}
.ErrorLogin{
    font-size: 16px;
    color: #ff0052;
}
.SocialLogin{
  display: block;
  position: relative;
  margin: 10px auto;
}
.FbLogin{
  display: inline-block;
  padding: 10px;
  padding-left: 20px;
  background: #3b5998;
  color: #fff;
  border-radius: 30px;
  font-family: "MontserratSemiBold", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.5s ease;
}
.FbLogin i{
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #fff;
  color: #3b5998;
  border-radius: 50%;
  transition: all 0.5s ease;
  vertical-align: middle;
}
.FbLogin span{
  display: inline-block;
  text-align: center;
  margin-right: 20px;
  vertical-align: middle;
}
.FbLogin:hover{
  background: #8b9dc3;
  color: #fff;
}
.FbLogin:hover i{
  color: #8b9dc3;
}
.OrLogin{
  font-size: 13px;
  display: block;
  margin-top: 20px;
  text-transform: uppercase;
  font-family: "MontserratSemiBold", sans-serif;
}
/* LOGIN END */
/* HEADER */
header{
    display: block;
    position: relative;
    width: calc(100% - 40px);
    padding: 20px;
    background: #2f2f39;
    color: #fff;
    font-size: 0;
    box-shadow: 0 0 3px #2f2f39;
}
header a{
    color: #fff;
}
.HeaderLogo{
    display: inline-block;
    vertical-align: middle;
}
.HeaderLogo img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .2);
    object-fit: cover;
    transition: all 0.5s ease;
}
.HeaderLogo:hover img{
    opacity: 0.8;
    border-radius: 10px;
}
.HeaderMenu{
    display: inline-block;
    width: calc(100% - 60px);
    vertical-align: middle;
    text-align: right;
    font-size: 0;
}
.HeaderMenu a{
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
}
.HeaderMenu a:last-child{
    padding-right: 0;   
}
.LogoutIcon{
    color: #febd00;
}
.HeaderMenu i{
    display: inline-block;
    font-size: 24px;
    padding: 10px;
    vertical-align: middle;
    padding-right: 0;
}
.HeaderMenu span{
    transition: font-size 0.5s ease-in;
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
}
.HeaderMenu a:hover span{
    font-size: 14px;
}
.UserIcon img{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, .2);
    transition: all 0.5s ease;
    vertical-align: middle;
}
.UserIcon:hover img{
    border-radius: 5px;
}
/* HEADER END */
/* SETUP */
main{
    display: block;
    position: relative;
}
.ShrinkContainer{
    display: block;
    margin: 0 auto;
    padding: 20px;
    width: 1300px;
    max-width: calc(100% - 60px);
}
.Half{
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.EditBox{
    display: block;
    box-shadow: 0 0 3px #2f2f39;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    margin: 15px;
    position: relative;
    transition: all 0.5s ease;
}
.FullPageView{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    margin: 0;
    z-index: 9;
}
.EditBoxHeader{
    display: block;
    background: #ff0052;
    color: #fff;
    font-size: 0;
    padding: 20px;
}
.EditBoxTitle{
    display: inline-block;
    font-size: 18px;
    font-family: "MontserratSemiBold", sans-serif;
    width: calc(100% - 30px);
    vertical-align: middle;
}
.EditBoxAction{
    width: 30px;
    height: 30px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    border-radius: 50%;
    color: #ff0052;
    line-height: 30px;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
}
.EditBoxAction:hover{
    background: #2f2f39;
}
.EditBoxBody{
    padding: 20px;
    height: 200px;
    overflow: auto;
}
.FullPageView .EditBoxBody{
    height: calc(100vh - 180px);
}
.SettingSection{
    display: block;
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #cbcbcb;
    font-size: 0;
}
.SettingSection:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.SettingTitle{
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: calc(100% - 200px);
}
.SettingTitleTextara{
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}
.SettingValueTextarea{
  display: block;
}
.SettingValueTextarea textarea{
  width: 100%;
  max-width: 100%;
  height: 50px;
  min-width: 100%;
}
.SettingValue{
    display: inline-block;
    vertical-align: top;
    width: 200px;
    text-align: right;
}
.SettingValue input[type='text'],
.SettingValue textarea{
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #cbcbcb;
    box-shadow: 0 0 1px #2f2f39; 
    display: block;
    max-width: calc(100% - 20px);
    min-width: calc(100% - 20px);
}
.SettingValue input[type='color']{
    border: 1px solid #cbcbcb;
    box-shadow: 0 0 1px #2f2f39; 
}
.SettingValue select,
.SettingValue input[type='number']{
    padding: 10px;
    border: 1px solid #cbcbcb;
    box-shadow: 0 0 1px #2f2f39;
    width: calc(100% - 20px);
}
.SettingValue select{
  width: 100%;
}
.SettingValue input[type='tel']{
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #cbcbcb;
    box-shadow: 0 0 1px #2f2f39;
    max-width: 100%;
    width: 100%;
}
.SettingValue .iti{
    max-width: 100%;
    font-size: 12px;
    position: relative;
    width: 100%;
}
.iti__country-name{
    font-size: 0;
    margin: 0;
}
.SettingValue .iti__country-list{
    max-width: 200px;
    overflow: hidden;
    overflow-y: auto;
}
.FullPageView .SettingTitle{
    width: 300px;
}
.FullPageView .SettingValue{
    width: calc(100% - 300px);
}
.SettingValue button{
    padding: 10px;
    border:0;
    border-radius: 30px;
    background: #febd00;
    color: #fff;
    font-family: "MontserratSemiBold", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.5s ease;
    font-size: 0;
    box-shadow: 0 0 3px #2f2f39;
    white-space: nowrap;
    max-width: calc(100% - 20px);
}
.SettingValue button span{
    padding-right: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 8px;
    margin-left: 5px;
}
.SettingValue button i{
    font-size: 18px;
    width: 30px;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    transition: all 0.5s ease;
}
.SettingValue button:hover{
    color: #2f2f39;
}
.SettingValue button:hover i{
    background: #2f2f39;
}
.SetupMain{
    font-size: 0;
    height: calc(100vh - 100px);
    display: block;
    position: relative;
    overflow: auto;
}
.EditBoxFooter{
    display: block;
    position: relative;
    background: #2f2f39;
    color: #fff;
    font-size: 0;
    padding: 10px;
    text-align: right;
}
.EditBoxButton{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.EditBoxButton:hover{
    color: #2f2f39;
}
.EditBoxButton:hover i{
    background: #2f2f39;
}
.GiveHeight{
  height: 50px;
}
.EditBoxButton span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.EditBoxButton i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
.Switch {
  position: relative;
  background: #fff;
  width: 60px!important;
  height: 30px;
  -webkit-appearance: initial;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
  border: 1px solid #cbcbcb;
  border-radius:30px;
  margin: 0;
}
.Switch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 22px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: #2f2f39;
  border: #cbcbcb 1px solid;
  border-radius:20px;
}
.Switch:after {
  left: 2%;
  content: "";
  background: #ff0052;
  color: #fff;
}
.Switch:checked:after {
  left: 53%;
  content: "";
  background: #febd00;
  color: #fff;
}
/* SETUP END */
/* ALERT */
.AlertWindow{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 100vh;
    background: rgba(47, 47, 57, .8);
    transition: all 1s ease;
    z-index: 12;
}
.AllertWindowInner{
    display: inline-block;
    padding: 20px;
    border-radius: 30px;
    background: #fff;
    vertical-align: middle;
    line-height: 1;
    box-shadow: 0 0 3px #2f2f39;
}
.AlertWindow i{
    font-size: 40px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    border-radius: 50%;
}
.RedAlert{
    background: #ff0052;
}
.YellowAllert{
    background: #febd00;
}
.AlertMessage{
    font-size: 20px;
    margin-top: 30px;
}
/* ALERT END */
/* IMAGE UPLOAD */
.ImageUpload{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: none;
    z-index: 12;
}
.ImageUploadHeader{
    padding: 11px 20px;
    background: #ff0052;
    width: calc(100% - 40px);
    display: block;
    color: #fff;
    font-size: 22px;
}
.CloseImageUpload{
    transition: all 0.5s ease;
    text-shadow: 0 0 1px #2f2f39;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
}
.CloseImageUpload:hover{
    color: #2f2f39;
}
.ImageDelete{
    transition: all 0.5s ease;
    box-shadow: 0 0 1px #2f2f39;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    color: #febd00;
    float: right;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
}
.ImageDelete:hover{
    background: #febd00;
    color: #fff;
}
.ImageUploadBody{
    display: block;
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
    text-align: center;
    line-height: calc(100vh - 140px);
    overflow: auto;
}
.ImageUploadFooter{
    padding: 10px 20px;
    background: #2f2f39;
    width: calc(100% - 40px);
    display: block;
    color: #fff;
    font-size: 20px;
    text-align: right;
}
.ImageUploadInner{
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: 1000px;
    max-width: calc(100% - 40px);
}
.ImageUploadCrop{
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    min-width: 300px;
    margin-bottom: 30px;
    text-align: center;
}
.ImageUploadField{
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    line-height: 300px;
    border: 2px dashed #2f2f39;
    background: #f1f1f6;
    box-shadow: 0 0 0 5px #f1f1f6;
}
.ImageUploadFieldInner{
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    width: 100%;
}
.ImageUploadField i{
    font-size: 60px;
    color: #ff0052;
}
.DragDropExplain{
    font-size: 24px;
    margin: 20px 0;
}
.AllowedTypes{
    font-size: 14px;
    margin-top: 20px;
}
.SelectFileButton{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.SelectFileButton:hover{
    color: #2f2f39;
}
.SelectFileButton:hover i{
    background: #2f2f39;
}
.SelectFileButton span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.SelectFileButton i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
.ImageUploadInput{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/* IMAGE UPLOAD */
/* WorkerCreate */
.UserCredit, .UserFee, .WorkerCreate, .ArticleCreate, .WorkTime{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  display: none;
}
.UserFeeHeader, .WorkerCreateHeader, .ArticleCreateHeader, .WorkTimeHeader{
    padding: 11px 20px;
    background: #ff0052;
    width: calc(100% - 40px);
    display: block;
    color: #fff;
    font-size: 22px;
}
.UserCreditClose, .UserFeeClose, .CloseWorkerCreate, .CloseArticleCreate, .CloseWorkTime{
    transition: all 0.5s ease;
    text-shadow: 0 0 1px #2f2f39;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
}
.CloseThis{
  font-size: 0;
}
.FullPageView .CloseThis{
  transition: all 0.5s ease;
  text-shadow: 0 0 1px #2f2f39;
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
  font-size: 20px;
}
.CloseThis:hover, .UserFeeClose:hover, .CloseWorkerCreate:hover, .CloseArticleCreate:hover, .CloseWorkTime:hover{
    color: #2f2f39;
}
.WorkerDelete, .ArticleDelete{
    transition: all 0.5s ease;
    box-shadow: 0 0 1px #2f2f39;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    color: #febd00;
    float: right;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
}
.WorkerDelete:hover, .ArticleDelete:hover{
    background: #febd00;
    color: #fff;
}
.UserFeeBody, .WorkerCreateBody, .ArticleCreateBody, .WorkTimeBody{
    display: block;
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
    text-align: left;
    /* line-height: calc(100vh - 140px); */
    background: #fff;
    overflow: auto;
}
.UserFeeBody{
  line-height: calc(100vh - 140px);
  text-align: center;
}
.UserFeeFooter, .WorkerCreateFooter, .ArticleCreateFooter, .WorkTimeFooter{
    padding: 10px 20px;
    background: #2f2f39;
    width: calc(100% - 40px);
    display: block;
    color: #fff;
    font-size: 20px;
    text-align: right;
}
.WorkerCreateInner, .ArticleCreateInner, .WorkTimeInner{
  font-size: 0;
}
.UserFeeInner{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.UserFeeTitle{
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  font-family: "MontserratSemiBold", sans-serif;
}
.WorkerCreateNameImage,
.WorkerAvailableDays,
.WorkerArticles{
  display: block;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 3px #2f2f39;
  margin: 15px;
}
.WorkerCreateNameImage{
  text-align: center;
}
.WorkerCreateName span{
  font-size: 15px;
  text-align: left;
  display: block;
  margin-top: 25px;
  margin-bottom: 5px;
}
.WorkerCreateNameImage img{
  display: block;
  margin: 0 auto;
  width: 150px;
  margin-bottom: 30px;
  box-shadow: 0 0 3px #2f2f39;
  border-radius: 50%;
}
.WorkerCreateNameImage input{
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #cbcbcb;
    box-shadow: 0 0 1px #2f2f39;
    display: block;
    max-width: calc(100% - 20px);
    min-width: calc(100% - 20px);
}
.ChangeWorkerImage{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.ChangeWorkerImage:hover{
    color: #2f2f39;
}
.ChangeWorkerImage:hover i{
    background: #2f2f39;
}
.ChangeWorkerImage span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.ChangeWorkerImage i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
.WorkerAvailableDaysTitle,
.WorkerArticlesTitle{
  font-size: 20px;
  text-align: left;
  font-family: "MontserratSemiBold",sans-serif;
}
.WorkerAvailableDay{
  padding: 2px 0;
  border-top: 1px solid #cbcbcb;
}
.WorkerAvailableDayName{
  display: inline-block;
  width: calc(100% - 70px);
  vertical-align: middle;
  font-size: 15px;
  text-align: left;
}
.WorkerAvailableDayValue{
  display: inline-block;
  vertical-align: middle;
  width: 70px;
}
/* WorkerCreate END */
/* WORKER */
.Worker{
  display: block;
  position: relative;
  padding: 5px 0;
  border-bottom: 1px solid #cbcbcb;
  font-size: 0;
  cursor: pointer;
  transition: all 0.5s ease;
}
.Worker:hover{
  background: #2f2f39;
  color: #fff;
}
.WorkerImg{
  display: inline-block;
  vertical-align: middle;
}
.WorkerImg img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  box-shadow: 0 0 3px #2f2f39;
}
.WorkerName{
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  width: calc(100% - 70px);
}
/* WORKER END */
/* ARTICLE */
.Article{
    display: block;
    position: relative;
    border-bottom: 1px solid #cbcbcb;
    font-size: 15px;
    padding: 15px 0;
    transition: all 0.5s ease;
    cursor: pointer;
}
.Article:hover{
  background: #2f2f39;
  color: #fff;
}
.SelectWorkerArticle{
  display: block;
  border-top: 1px solid #cbcbcb;
  padding: 5px 0;
}
.SelectWorkerArticleName{
  display: inline-block;
  width: calc(100% - 70px);
  vertical-align: middle;
}
.SelectWorkerArticleValue{
  width: 70px;
  display: inline-block;
  vertical-align: middle;
}
.SelectWorkerArticleName img{
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 50%;
  box-shadow: 0 0 3px #2f2f39;
  vertical-align: middle;
  display: inline-block;
}
.SelectWorkerArticleName span{
  font-size: 14px;
  vertical-align: middle;
  display: inline-block;
}
/* ARTICLE END */
/* START */
body.BodyStart{
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
main.Start{
  display: block;
  position: relative;
  height: calc(100% - 100px);
  overflow: auto;
  width: 100%;
}
.StartBody{
  display: block;
  position: relative;
  height: calc(100% - 70px);
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
  overflow-x: auto;
}
.StartBody.NoOverflow{
  overflow: hidden;
}
.StartWorker{
  display: inline-block;
  vertical-align: top;
  height: 100%;
  user-select: none;
  transition: all 0.4s ease;
}
.ShowFull{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%!important;
  height: 100%;
  background: #fff;
  z-index: 2;
}
.SelectedWorker{
  background: #f1f1f6;
}
.StartWorkerInner{
  border-right: 1px solid #cbcbcb;
  height: 100%;
}
.StartWorkerHeader{
  display: block;
  position: relative;
  white-space: normal;
  padding: 10px;
  border-bottom: 1px solid #cbcbcb;
  transition: all 0.5s ease;
  cursor: pointer;
}
.StartWorkerHeader:hover{
  background: #ff0052;
  color: #fff;
}
.StartWorkerImg{
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 3px #2f2f39;
  margin-right: 10px;
}
.StartWorkerName{
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 90px);
}

.Col1{
  width: 100%;
}
.Col1x2{
  width: 50%;
}
.Col1x3{
  width: 33.33%;
}
.Col1x4{
  width: 25%;
}
.StartFooter{
  display: block;
  position: relative;
  background: #2f2f39;
  font-size: 0;
  color: #fff;
  padding: 10px 0;
}
.StartFooterChooseDate{
  width: 190px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  user-select: none;
}
.StartFotterDateLeft,
.StartFotterDateRight{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  color: #2f2f39;
  transition: all 0.5s ease;
  cursor: pointer;
}
.StartFotterDateLeft:hover,
.StartFotterDateRight:hover{
  background: #ff0052;
  color: #fff;
}
.StartFooterDate{
  display: inline-block;
  vertical-align: middle;
}
.StartFooterDate input{
  width: 100px;
  text-align: center;
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.StartFooterAddHolder{
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 210px);
  margin-right: 10px;
}
.StartFooterAdd{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.StartFooterAdd:hover{
    color: #2f2f39;
}
.StartFooterAdd:hover i{
    background: #2f2f39;
}
.StartFooterAdd span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.StartFooterAdd i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
.StartFooterClose{
    display: inline-block;
    padding: 10px;
    background: #ff0052;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
    margin-right: 15px;
}
.StartFooterClose:hover{
    color: #2f2f39;
}
.StartFooterClose:hover i{
    background: #2f2f39;
}
.StartFooterClose span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.StartFooterClose i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #ff0052;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
.StartWorkerBody{
  padding: 10px;
  height: calc(100% - 121px);
  overflow: hidden;
  overflow-y: auto;
}
.DayOff{
  display: block;
  position: relative;
  font-size: 16px;
  text-align: center;
  color: #ff0052;
}
.Booked{
  display: block;
  position: relative;
  background: #febd00;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.5s ease;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: center;
  user-select: none;
}
.Booked:hover{
  background: #2f2f39;
  color: #fff;
}
.BookedTime{
  font-size: 16px;
  font-family: "MontserratSemiBold", sans-serif;
}
.BookedName{
  font-size: 14px;
}
.BookedPhone{
  font-size: 12px;
}
.BookingConfirmed{
  background: #ff0052;
}
.BookingCanceled{
  background: #2f2f39;
  color: #fff;
}
/* START END */
/* MAKEBOOK*/
.MakeBook,.MakeClose{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
  overflow: hidden;
  z-index: 3;
}
.MakeBookHeader,
.MakeCloseHeader{
  display: block;
  position: relative;
  font-size: 0;
  color: #fff;
  background: #ff0052;
  padding: 17px;
  text-align: left;
}
.MakeBookHeaderLeft,
.MakeCloseHeaderLeft{
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 40px);
}
.MakeBookHeaderRight,
.MakeCloseHeaderRight{
  display: inline-block;
  vertical-align: middle;
}
.MakeBookTitle,
.MakeCloseTitle{
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  font-family: "MontserratSemiBold", sans-serif;
}
.MakeBookClose,
.MakeCloseClose{
  font-size: 20px;
  vertical-align: middle;
  transition: all 0.5s ease;
  text-shadow: 0 0 1px #2f2f39;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  padding-left: 0;
}
.MakeBookClose:hover,
.MakeCloseClose:hover{
  color: #2f2f39;
}
.MakeBookDelete{
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  background: #fff;
  color: #ff0052;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 3px #2f2f39;
  transition: all 0.5s ease;
  cursor: pointer;
}
.MakeBookDelete:hover{
  background: #febd00;
  color: #2f2f39;
}
.MakeBookBody,
.MakeCloseBody{
  display: block;
  position: relative;
  height: calc(100vh - 150px);
  line-height: calc(100vh - 150px);
  background: #fff;
  overflow: auto;
}
.MakeBookInner,
.MakeCloseInner{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 500px;
  max-width: calc(100% - 20px);
}
.MakeBookGroup{
  padding: 30px;
  box-shadow: 0 0 3px #2f2f39;
  border-radius: 30px;
  margin: 15px 0;
}
.MakeGroupTitle{
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
}
.MakeGroupBody{
  display: block;
  border-top: 1px solid #cbcbcb;
  padding: 5px 0;
}
.MakeBookInput{
  font-size: 0;
  display: block;
  padding: 5px 0;
  border-top: 1px solid #cbcbcb;
  text-align: left;
}
.MakeBookInput:first-child{
  border-top: 0;
}
.MakeBookInputTitle{
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 200px);
}
.MakeBookInputValue{
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  text-align: right;
}
.MakeBookInputValue input[type='text']{
  width: calc(100% - 20px);
  border-radius: 3px;
  border: 1px solid #cbcbcb;
  padding: 10px;
}
.MakeBookInputValue select{
  width: 100%;
  border-radius: 3px;
  border: 1px solid #cbcbcb;
  padding: 10px;
}
.MakeBookInputValue input[type='tel']{
  width: 100%;
  border-radius: 3px;
  border: 1px solid #cbcbcb;
  padding-top: 10px;
  padding-bottom: 10px;
}
.TimeSelect{
  position: relative;
  background: #fff;
  -webkit-appearance: initial;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
  border: 0;
  margin: 20px 5px;
  transition: all 0.4s ease;
}
.TimeSelect:after{
  content: attr(value);
  background: #febd00;
  padding: 10px;
  border-radius:30px;
  box-shadow: 0 0 3px #2f2f39;
  color: #2f2f39;
  transition: all 0.4s ease;
}
.TimeSelect:checked:after{
  background: #ff0052;
  color: #fff;
}
.MakeBookFooter{
  display: block;
  position: relative;
  text-align: right;
  padding: 10px;
  background: #2f2f39;
}
.MakeBookBtn{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.MakeBookBtn:hover{
    color: #2f2f39;
}
.MakeBookBtn:hover i{
    background: #2f2f39;
}
.MakeBookBtn span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.MakeBookBtn i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
/* MAKEBOOK END*/
/* WORKTEIME */
.WorkTimeBody{
    line-height: calc(100vh - 140px);
    text-align: center;
}
.WorkTimeInner{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  box-shadow: 0 0 3px #2f2f39;
  padding: 30px;
  border-radius: 30px;
  width: 400px;
  max-width: calc(100% - 60px);
}
.WorkTime h3{
  font-size: 18px;
  margin-bottom: 20px;
}
.WorkTimeHolder{
  display: block;
  position: relative;
  padding: 5px 0;
  border-top: 1px solid #cbcbcb;
}
.WorkTimeDayName{
  display: inline-block;
  vertical-align: top;
  width: 180px;
}
.WorkTimeDayName .Switch{
  display: inline-block;
  vertical-align: middle;
}
.WorkTimeDayName span{
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: calc(100% - 70px);
  text-align: left;
  padding-left: 5px;
}
.WorkTimeDayStart,
.WorkTimeDayEnd{
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 90px);
}
.WorkTimeDayStart select,
.WorkTimeDayEnd select{
  margin: 5px;
  padding: 5px;
  max-width: calc(100% - 10px);
}
/* WORKTEIME END */
/* USER FEE */
.UserFeeText{
  display: block;
  font-size: 15px;
  width: 80%;
  margin: 0 auto;
  line-height: 1.2;
}
.UserFeePrice{
  display: block;
  position: relative;
  padding: 10px;
}
.UserFeePriceValue,
.UserCreditPriceValue{
  display: inline-block;
  vertical-align: top;
  font-size: 50px;
  font-family: "MontserratSemiBold", sans-serif;
}
.UserFeePriceCurrency{
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
}
.UserFeeOption input{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.UserFeeOption{
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}
.UserFeeOptionContent{
  padding: 20px 30px;
  border-radius: 30px;
  box-shadow: 0 0 3px #2f2f39;
  transition: all 0.5s ease;
  cursor: pointer;
}
:checked + .UserFeeOptionContent{
  background: #ff0052;
  color: #fff;
}
.UserFeeOption:hover .UserFeeOptionContent{
  background: #febd00;
}
.UserFeeOptionTitle{
  font-size: 18px;
  font-family: "MontserratSemiBold", sans-serif;
}
.UserFeeOptionText{
  display: block;
  width: 200px;
  margin: 10px auto;
  border-top: 1px solid;
  padding-top: 10px;
}
.ExpiringNotification{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 100vh;
  text-align: center;
  background: rgba(255, 255, 255, .8);
}
.ExpiringNotificationInner{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  padding: 30px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 0 3px #2f2f39;
  max-width: calc(100% - 60px);
  width: 300px;
}
.ExpiringNotificationText{
  display: block;
  font-size: 16px;
  margin-bottom: 20px;
}
.ShowUserFee{
    display: inline-block;
    padding: 10px;
    background: #febd00;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 0 3px #2f2f39;
    border: 0;
    color: #fff;
}
.ShowUserFee:hover{
    color: #2f2f39;
}
.ShowUserFee:hover i{
    background: #2f2f39;
}
.ShowUserFee span{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: "MontserratSemiBold", sans-serif;
    padding-right: 30px;
    padding-left: 10px;
    vertical-align: middle;
    display: inline-block;
}
.ShowUserFee i{
    font-size: 18px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #febd00;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.5s ease;
}
/* USER FEE END*/
/* REPORTS */
.BodyReports{
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.ReportsMain{
  display: block;
  position: relative;
  height: calc(100% - 100px);
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.ReportsBody{
  position: relative;
  display: block;
  height: calc(100% - 70px);
  overflow: auto;
  line-height: 1;
}
.ReportsFooter{
  display: block;
  position: relative;
  background: #2f2f39;
  font-size: 0;
  padding: 10px;
}
.BodyReports .ui-widget.ui-widget-content{
  z-index: 3!important;
}
.ReportsFooterChooseDate{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  text-align: center;
}
.ReportsFooterChooseDate small{
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  height: 50px;
  line-height: 60px;
}
.ReportsFooterDate{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ReportsFooterDate span{
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}
.ReportsFooterDate input{
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  width: 96px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.ReportsFooterSubmit{
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: calc(100% - 200px);
}
.ExpandReport{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  border-radius: 0;
  margin: 0;
  z-index: 2;
}
.ExpandReport .CloseThis{
  transition: all 0.5s ease;
  text-shadow: 0 0 1px #2f2f39;
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
  font-size: 20px;
}
.ExpandReport .EditBoxBody{
  height: calc(100% - 110px);
}
.tablesorter{
  margin-top: 10px;
  font-size: 12px;
  border-spacing: 0;
  border-collapse: collapse;
}
table.tablesorter thead tr .header {
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	padding-right: 15px;
	padding-left: 5px;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.gif);
}
.tablesorter td,
.tablesorter th{
  padding: 3px;
  border: 0;
  border-bottom: 1px solid #cbcbcb;
}
.NoResultsReport{
  text-align: center;
  font-size: 20px;
}
/* REPORTS END*/
.ui-widget-overlay{
  background: #2f2f39;
  opacity: 0.8;
  box-shadow: 0 0 3px #2f2f39;
}
.ui-widget.ui-widget-content{
  padding: 0px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 0 3px #2f2f39;
  min-width: 250px;
  z-index: 99!important
}
.ui-dialog .ui-dialog-titlebar{
  padding: 15px;
}
.ui-dialog .ui-dialog-titlebar-close{
  right: 10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  top: 20px;
  transition: all 0.3s ease;
}
.ui-dialog .ui-dialog-buttonpane button{
  transition: all 0.5s ease;
  border: 0;
}
.ui-dialog .ui-dialog-buttonpane button:first-child{
  background: #ff0052;
  color: #fff;
}
.ui-dialog .ui-dialog-buttonpane button:hover{
  background: #febd00;
  color: #2f2f39;
}
.ui-dialog .ui-dialog-buttonpane{
  background: #2f2f39;
}
.ui-dialog .ui-dialog-content{
  padding: 20px;
}
.ui-datepicker td span, .ui-datepicker td a{
  border-radius: 4px;
}
.ui-datepicker table{
  margin: 10px;
  width: calc(100% - 20px);
}
@media (max-width: 1200px){
  .Col1x4{
    width: 50%;
  }
  .StartWorkerImg{
    width: 50px;
    height: 50px;
  }
  .StartWorkerName{
    width: calc(100% - 60px);
    font-size: 14px;
  }
  .HeaderMenu a:hover span{
    font-size: 12px;
  }
  .HeaderLogo img{
    width: 40px;
    height: 40px;
  }
  header{
    padding: 5px;
    width: calc(100% - 10px);
  }
  main.Start{
    height: calc(100% - 60px);
  }
  .StartFooterClose i, 
  .StartFooterAdd i,
  .MakeBookBtn i,
  .EditBoxButton i,
  .SettingValue button i{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .StartFooterClose span, 
  .StartFooterAdd span,
  .MakeBookBtn span,
  .EditBoxButton span{
    font-size: 12px;
    padding-right: 10px;
  }
  .StartFooter{
    padding: 5px;
  }
  .StartBody{
    height: calc(100% - 50px);
  }
  .HeaderMenu i{
    font-size: 18px;
  }
  .HeaderMenu a{
    padding: 0 5px;
  }
  .MakeBookHeader, .MakeCloseHeader{
    padding: 5px;
  }
  .MakeBookTitle, .MakeCloseTitle{
    font-size: 14px;
  }
  .ExpandReport .CloseThis, .CloseImageUpload, .FullPageView .CloseThis, .MakeBookClose, .MakeCloseClose,.UserCreditClose, .UserFeeClose, .CloseWorkerCreate, .CloseArticleCreate, .CloseWorkTime{
    padding: 10px;
    font-size: 16px;
  }
  .MakeBookBody, .MakeCloseBody{
    height: calc(100vh - 100px);
    line-height: calc(100vh - 100px);
  }
  .MakeBookFooter{
    padding: 5px;
  }
  .MakeBookInputTitle,
  .WorkTimeDayName span{
    font-size: 13px;
  }
  .MakeBookGroup{
    padding: 20px;
    margin: 10px 0;
  }
  .MakeGroupTitle,
  .EditBoxTitle,
  .UserFeeTitle,
  .WorkTime h3{
    font-size: 14px;
  }
  .MakeBookDelete,
  .WorkerDelete, 
  .ArticleDelete,
  .ImageDelete{
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 5px;
  }
  .EditBoxHeader{
    padding: 10px;
  }
  .EditBox{
    margin: 10px;
  }
  .GiveHeight{
    height: 40px;
  }
  .WorkerImg img{
    height: 40px;
    width: 40px;
  }
  .WorkerName{
    width: calc(100% - 50px);
    font-size: 13px;
  }
  .Article, .SettingTitle,
  .WorkerAvailableDayName,
  .SelectWorkerArticleName span,
  .WorkerCreateName span{
    font-size: 13px;
  }
  .WorkerAvailableDaysTitle, .WorkerArticlesTitle{
    font-size: 16px;
  }
  .FullPageView,
  .ExpandReport{
    margin: 0;
  }
  .ExpandReport{
    height: calc(100% - 60px);
  }
  .FullPageView .EditBoxBody{
    height: calc(100vh - 140px);
    padding: 10px;
  }
  .ExpandReport .EditBoxBody{
    height: calc(100% - 77px);
    padding: 10px;
  }
  .ImageUploadHeader, .UserFeeHeader, .WorkerCreateHeader, .ArticleCreateHeader, .WorkTimeHeader{
    padding: 5px;
    width: calc(100% - 10px);
  }
  .UserFeeBody, .WorkerCreateBody, .ArticleCreateBody, .WorkTimeBody{
    height: calc(100vh - 120px);
    padding: 10px 0;
  }
  .SelectWorkerArticleName img{
    width: 60px;
    height: 60px;
  }
  .UserFeeFooter, .WorkerCreateFooter, .ArticleCreateFooter, .WorkTimeFooter, .ImageUploadFooter{
    padding: 5px;
    width: calc(100% - 10px);
  }
  .ImageUploadBody{
    height: calc(100vh - 120px);
    line-height: calc(100vh - 120px);
    overflow: auto;
    padding: 10px 0;
  }
  .ReportsMain{
    height: calc(100% - 60px);
  }
  .ReportsFooter{
    padding: 5px;
  }
  .ReportsBody{
    height: calc(100% - 60px);
  }
  .NoResultsReport{
    font-size: 16px;
  }
  .StartFooterChooseDate{
    margin: 0;
  }
  .StartFooterAddHolder{
    margin: 0;
    width: calc(100% - 190px);
  }
  .SetupMain{
    height: calc(100vh - 60px);
  }
  .WorkerCreateNameImage img{
    width: 100px;
  }
}
@media (max-width: 1000px){
  .Half{
    width: 100%;
  }
  .ShrinkContainer{
    padding: 0;
    max-width: 100%;
  }
}
@media (max-width: 800px){
  .Col1x4,
  .Col1x2,
  .Col1x3,
  .Col1{
    display: block;
    width: 100%;
  }
  .StartBody{
    white-space: normal;
  }
  .StartWorkerBody{
    display: none;
  }
  .StartWorkerInner,
  .StartWorker{
    height: auto;
  }
  .ShowFull,
  .ShowFull .StartWorkerInner{
    height: 100%;
  }
  .ShowFull .StartWorkerBody{
    display: block;
  }
  .HeaderMenu span{
    display: none;
  }
  .StartFooterClose span, .StartFooterAdd span{
    display: none;
  }
  .UserIcon img{
    width: 30px;
    height: 30px;
  }
  .EditBoxFooter,
  .EditBoxBody{
      display: none;
  }
  .FullPageView .EditBoxFooter,
  .FullPageView .EditBoxBody,
  .ExpandReport .EditBoxFooter,
  .ExpandReport .EditBoxBody,
  .ArticleCreateBody .EditBoxBody{
      display: block;
  }
  .ArticleCreateBody .EditBoxBody{
    height: auto;
  }
  .SettingTitle,
  .FullPageView .SettingTitle,
  .FullPageView .SettingValue,
  .SettingValue{
    width: 100%;
  }
  .SettingTitle{
    margin-bottom: 5px;
  }
  .SettingValue input[type='color']{
    width: 100%;
  }
  .SettingValue{
    text-align: center;
  }
  .ChangeWorkerImage i,
  .SelectFileButton i{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .ChangeWorkerImage span,
  .SelectFileButton span{
    font-size: 12px;
    padding-right: 10px;
  }
  .ChangeWorkerImage span, .SelectFileButton span{
    font-size: 10px;
  }
  .WorkerCreateNameImage, .WorkerAvailableDays, .WorkerArticles{
    margin: 10px;
    padding: 20px;
  }
  .MakeBookInputTitle,
  .MakeBookInputValue{
    width: 100%;
  }
  .MakeBookInputTitle{
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .WorkTimeInner{
    padding: 20px;
  }
  .WorkTimeDayStart, .WorkTimeDayEnd{
    width: 50%;
  }
}