.scroll-bar {
    overflow: scroll;
}

.scroll-bar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scroll-bar::-webkit-scrollbar-thumb {
    background: rgba(203, 203, 203, 0.62);
    border-radius: 3px;
}

.text-overflow{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

#broj-calendar-parent{
    width: 100%;
    height: 100%;
    padding: 12px 24px 12px 62px;
    position: relative;
}

#broj-calendar-parent .flex-box{
    justify-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
}

button.broj-primary-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    background-color: #E87130;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fafafa;
    padding: 0px 18px;
    outline: none;
    border: none;
    box-sizing: border-box;
    height: 36px;
}

button.broj-secondary-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    background: none;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #E87130;
    padding: 0px 18px;
    outline: none;
    border: 1px solid #E87130;
    box-sizing: border-box;
    height: 36px;
}

button.broj-tertiary-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    background: none;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #B3B3B3;
    padding: 0px 18px;
    outline: none;
    border: 1px solid #B3B3B3;
    box-sizing: border-box;
    height: 36px;
}

#broj-calendar-parent button.active{
    background-color: #121212;
    border: solid 1px #fff;
}

#broj-calendar-parent button.white{
    color: #E87130;
    background:#fff;
}

/* calendarNavZone */
#broj-calendar-nav{
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#broj-calendar-nav > div{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

#broj-calendar-nav > div:nth-child(1) img{
    width: 24px;
    height: 24px;
    cursor: pointer;
}

#broj-calendar-nav > div:nth-child(1) label{
    font-family: NotoSansKR,sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    padding: 0px 12px;
}

#broj-calendar-nav > div:nth-child(2){
    border-collapse : collapse;
    border-radius: 8px;
    display: table;
    overflow: hidden;
}

#broj-calendar-nav > div:nth-child(2) > button{
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.70);
    border-radius: 0px;
    border-collapse: collapse;
    box-sizing: border-box;
    height: 36px;
    font-size: 14px;
}

#broj-calendar-nav > div:nth-child(2) > button.active{
    background: rgba(255, 255, 255, 0.50);
    color: white;
    border: none;
    box-sizing: border-box;
}

#broj-calendar-trainer-zone{
    height: max-content;
    width: 100%;
    padding: 12px 0px 0px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: visible;
}

#broj-calendar-trainer-zone > img {
    cursor: pointer;
    width: 18px;
    padding: 12px 0px 28px;
}

#broj-calendar-trainer-zone > div {
    width: calc(100% - 20px);
    overflow: scroll;
    display: flex;
}

#broj-calendar-trainer-zone > div > .broj-calendar-trainer-btn{
    width: max-content;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: relative;
    margin-left: 6px;
    cursor: pointer;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.39px;
    color: rgba(255, 255, 255, 0.50);
    padding: 0px 12px;
    min-width: max-content;
    border: 1px solid;
}
.day-top-info .broj-calendar-trainer-btn{
    width: max-content;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    position: relative;
    margin-left: 12px;
    opacity: 30%;
    cursor: pointer;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.39px;
    color: #fff;
    border: 3px solid;
    padding: 0px 6px;
}

#broj-calendar-trainer-zone > div .broj-calendar-trainer-btn.active{
    opacity: 100%;
    font-weight: 600;
    color: #FFFFFF;
}
.day-top-info .broj-calendar-trainer-btn{
    opacity: 100%;
}

#broj-calendar-trainer-zone > div .broj-calendar-trainer-btn > div{
    width: 26px;
    height: 26px;
    background-size: 100% 100%;
    border-radius: 25px;
    position: absolute;
    left: 2px;
    top: 2px;
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
}

.day-top-info .broj-calendar-trainer-btn > div{
    width: 16px;
    height: 26px;
    background-size: 100% 100%;
    border-radius: 25px;
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
}

#broj-calendar-trainer-zone > div .broj-calendar-trainer-btn > div > img,.day-top-info .broj-calendar-trainer-btn > div > img{
    width: 100%;
    height: 100%;
    border-radius: 25px;
    opacity: 50%;
    position: absolute;
}

.day-top-info .broj-calendar-trainer-btn > div > img{
    opacity: 100%;
}

#broj-schedule-info-zone{
    height: max-content;
    padding-bottom: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#broj-schedule-info-zone > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15px;
    height: 100%;
    font-size: 10px;
    color: white;
}

#broj-calendar-zone{
    height: calc(100% - 136px);
    width: 100%;
    /*overflow: auto;*/
}

#broj-month-calendar{
    position: relative;
    table-layout: fixed;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    background: #222222;
}

#broj-month-calendar .month-top {
    height: 33px;
}

#broj-month-calendar .month-top td{
    text-align: center;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #fff;
    line-height: 30px;
}

#broj-month-calendar td {
    box-sizing: border-box;
    vertical-align: top;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #4a4a4a;
    color: white;
    position: relative;
}
#broj-month-calendar td .day {
    position: absolute;
    top: 3px;
    right: 5px;
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: NotoSansKR sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}
#broj-month-calendar td .day > img{
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

#broj-month-calendar td .month-reservation-status{
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: NotoSansKR sans-serif;
    font-size: 10px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

#broj-month-calendar td .month-cell-parent {
    padding-top: 25px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    position: relative;
}
#broj-month-calendar td .month-cell-parent > .schedule-add-icon{
    position: absolute;
    left: 0px;
    top: 25px;
    height: 28px;
    width: 28px;
    cursor: pointer;
    border: none;
    padding: calc(50% - 26px) calc(50% - 14px);
    animation: fadein 200ms;
    -moz-animation: fadein 200ms; /* Firefox */
    -webkit-animation: fadein 200ms; /* Safari and Chrome */
    -o-animation: fadein 200ms; /* Opera */
}
#broj-month-calendar td .month-cell-parent > ul {
    width: 100%;
    max-height: 100%;
    height: max-content;
    overflow-x: hidden;
}

#broj-month-calendar td .month-cell-parent > ul > li{
    box-sizing: border-box;
    height: 24px;
    border-radius: 4px;
    /*border: solid 1px #ec87bf;*/
    background-color: #6A6A6A;
    padding: 0px 6px;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    cursor: pointer;
    margin-bottom: 2px;
}

#broj-month-calendar td .month-cell-parent > ul > li .rectangle, .schedule-area-col > .calendar-schedule-row .rectangle{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #5d9dec;
    display: inline-flex;
}
#broj-month-calendar td .month-cell-parent > ul > li .rectangle.finish, .schedule-area-col > .calendar-schedule-row .rectangle.finish{
    background-color: rgb(149, 0, 136);
}
#broj-month-calendar td .month-cell-parent > ul > li .rectangle.saturation, .schedule-area-col > .calendar-schedule-row .rectangle.saturation{
    background-color: #ffce55;
}
#broj-month-calendar td .month-cell-parent > ul > li .rectangle.full, .schedule-area-col > .calendar-schedule-row .rectangle.full{
    background-color: #fa6400;
}
#broj-month-calendar td .month-cell-parent > ul > li .rectangle.relaxed, .schedule-area-col > .calendar-schedule-row .rectangle.relaxed{
    background-color: #43b79f;
}
#broj-week-calendar, #broj-day-calendar{
    width: 100%;
    /*width: max-content;*/
    /*min-width: 100%;*/
    height: 100%;
    background: #222222;
    border-radius: 3px;
}

#broj-week-calendar .week-calendar-top,#broj-day-calendar .day-calendar-top {
    height: 60px;
    width: 100%;
    padding-right: 10px;
    border: solid 1px #999999;
}

#broj-week-calendar .week-calendar-top > div:nth-child(1),#broj-day-calendar .day-calendar-top > div:nth-child(1){
    width: 100%;
    height: 33px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

#broj-week-calendar .week-calendar-top .week-top-info, #broj-day-calendar .day-calendar-top .day-top-info{
    /*min-width: 250px;*/
    height: 100%;
    font-family: NotoSansKR,sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    display: inline-flex;
    justify-content: center;
    line-height: normal;
    align-items: center;
    letter-spacing: normal;
    color: #fff;
    flex: 1;
    cursor: pointer;
}

#broj-week-calendar .week-calendar-top .week-top-info+.week-top-info, #broj-day-calendar .day-calendar-top .day-top-info+.day-top-info{
    border-left: solid 1px #999999;
}

#broj-week-calendar .week-calendar-top .week-top-info img{
    width: 14px;
    height: 14px;
}

#broj-week-calendar .week-calendar-top > div:nth-child(2),#broj-day-calendar .day-calendar-top > div:nth-child(2) {
    width: 100%;
    height: 27px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

#broj-week-calendar .week-calendar-top .week-top-status,#broj-day-calendar .day-calendar-top .day-top-status{
    height: 100%;
    font-family: NotoSansKR,sans-serif;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    color: #fff;
    flex: 1;
    cursor: pointer;
    justify-content: space-between;
    padding: 0px 6px;
}

#broj-week-calendar .week-calendar-top .week-top-status+.week-top-status,#broj-day-calendar .day-calendar-top .day-top-status+.day-top-status{
    border-left: solid 1px #999999;
}

#broj-week-calendar .week-calendar-top .week-top-status > label,#broj-day-calendar .day-calendar-top .day-top-status > label{
    font-size: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#broj-week-calendar .week-calendar-body,#broj-day-calendar .day-calendar-body {
    position: relative;
    left: -70px;
    width: calc(100% + 70px);
    height: calc(100% - 70px);
}

#broj-week-calendar .week-calendar-body .week-time-zone,#broj-day-calendar .day-calendar-body .day-time-zone{
    width: 70px;
    display: inline-block;
}
#broj-week-calendar .week-calendar-body .week-time-zone .hour-info,#broj-day-calendar .day-calendar-body .day-time-zone .hour-info{
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    position: relative;
}
#broj-week-calendar .week-calendar-body .week-time-zone .hour-info a,#broj-day-calendar .day-calendar-body .day-time-zone .hour-info a{
    position: absolute;
    right: 10px;
    bottom: -8px;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}

#broj-week-calendar .week-calendar-body .week-schedule-zone,#broj-day-calendar .day-calendar-body .day-schedule-zone{
    position: relative;
    width: calc(100% - 70px);
    height: max-content;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#broj-week-calendar .week-calendar-body .week-schedule-zone .schedule-area-col,#broj-day-calendar .day-calendar-body .day-schedule-zone .schedule-area-col {
    float: left;
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    position: relative;
}
#broj-week-calendar .week-calendar-body .week-schedule-zone .schedule-area-col .schedule-area-unit,#broj-day-calendar .day-calendar-body .day-schedule-zone .schedule-area-col .schedule-area-unit{
    border: solid 1px #999999;
    width: 100%;
    height: 60px;
    position: relative;
    box-sizing: border-box;
    border-bottom: dashed 1px #999999;
}
#broj-week-calendar .week-calendar-body .week-schedule-zone .schedule-area-col .schedule-area-unit.min-unit,#broj-day-calendar .day-calendar-body .day-schedule-zone .schedule-area-col .schedule-area-unit.min-unit{
    border: solid 1px #999999;
    width: 100%;
    height: 60px;
    position: relative;
    box-sizing: border-box;
    border-top: dotted 1px #585656;
}
.schedule-area-unit > .schedule-add-icon{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 28px;
    width: 28px;
    cursor: pointer;
    border: none;
    padding: calc(50% - 26px) calc(50% - 14px);
    animation: fadein 200ms;
    -moz-animation: fadein 200ms; /* Firefox */
    -webkit-animation: fadein 200ms; /* Safari and Chrome */
    -o-animation: fadein 200ms; /* Opera */
}

#broj-week-calendar .week-calendar-body .week-schedule-zone .schedule-area-col > .calendar-schedule-row,#broj-day-calendar .day-calendar-body .day-schedule-zone .schedule-area-col > .calendar-schedule-row{
    position: absolute;
    left: 0px;
    width: 100%;
    border-radius: 4px;
    /*border: solid 1px #ec87bf;*/
    padding: 6px;
    background: #222;
    font-family: NotoSansKR,sans-serif;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    justify-content: flex-start;
    cursor: pointer;
    margin: 2px;
}
.schedule-area-col > .calendar-schedule-row > label{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
#broj-mini-calendar{
    width: 100%;
    height: 100%;
    color: #89898b;
    text-align: center;
    transform: rotate(0deg);
    font-size: 11px;
}

#broj-mini-calendar > div:nth-child(1){
    width: 100%;
    height: 30px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

#broj-mini-calendar > div:nth-child(1) > label{
    font-family: "ProductSans-Bold", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

#broj-mini-calendar > div:nth-child(1) > a{
    cursor: pointer;
    font-family: "AppleSDGothicNeo-Bold", Helvetica, Arial, serif;
}

#broj-mini-calendar > table:nth-child(2) {
    width: 100%;
    cursor: pointer;
    padding: 0px;
    height: calc(100% - 30px);
}
.sunday {
    color: #f4510b;
}
.saturday {
    color: #1e88e5;
}
#calendar-option-zone {
    width: 100%;
    height: 100%;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
}

#calendar-option-zone > div:nth-child(1) {
    width: 100%;
    height: 20px;
    margin-bottom: 12px;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #FFFFFF;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
#calendar-option-zone > div:nth-child(1) > img{
    width: 24px;
    height: 24px;
    margin-right: 6px;
}
#calendar-option-zone > div:nth-child(2) {
    width: 100%;
    height: calc(100% - 48px);
    overflow: visible;
}
#calendar-option-zone .calendar-search-zone {
    border-radius: 3px;
    padding: 7px 40px 7px 0px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    position: relative;
    border-bottom: 2px solid #4a4a4a;
    margin-bottom: 12px;
}
#calendar-option-zone .calendar-search-zone > input {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: white;
    background: none;
}
#calendar-option-zone .calendar-search-zone > img {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 12px;
}
#calendar-option-zone > div:nth-child(2) > div:nth-child(2){
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

#calendar-option-zone > div:nth-child(2) > div:nth-child(3) {
    height: calc(100% - 90px);
    width: calc(100% + 10px);
}
#calendar-option-zone > div:nth-child(2) > div:nth-child(3) > ul > li{
    height: 18px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

#calendar-option-zone > div:nth-child(2) > div:nth-child(3) > ul > li+li{
    margin-top: 12px;
}

#calendar-option-zone > div:nth-child(2) > div:nth-child(3) > ul > li > input[type = checkbox]{
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 12px;
}

#calendar-option-zone > div:nth-child(2) > div:nth-child(3) > ul > li > label{
    width: calc(100% - 30px);
    cursor: pointer;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}

.broj-calendar-background {
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #00000050;
    display: flex;
    justify-content: center;
    align-items: center;
}

.broj-calendar-background .flex-box{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.broj-calendar-background > .broj-calendar-parent{
    max-width: 900px;
    max-height: 671px;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
    background-color: #2c2c2c;
    width: 100%;
    height: 100%;
}
.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body{
    width: 100%;
    height: calc(100% - 56px);
}
.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(1){
    width: 100%;
    height: 74px;
    justify-content: space-between;
    flex-direction: row;
    padding: 24px;
    font-family: NotoSansKR,sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(1) > img{
    cursor: pointer;
    width: 26px;
    height: 26px;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(2) {
    width: 100%;
    height: 30px;
    font-family: NotoSansKR,sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    border-bottom: 2px solid #383838;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(2) > div {
    margin-left: 24px;
    width: 80px;
    color: #a4a4a4;
    padding-bottom: 6px;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(2) > div.active{
    color: white;
    border-bottom: 2px solid #E87130;
    cursor: default;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > div:nth-child(3){
    width: 100%;
    height: calc(100% - 104px);
    padding: 24px;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-footer{
    width: 100%;
    height: 56px;
    display: flex;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-footer > button{
    flex: 1;
    height: 100%;
    outline: none;
    border: none;
    background-color: #7c7c7c;
    font-family: NotoSansKR,sans-serif;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.67px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-footer > button:nth-child(2){
    background-color: #E87130;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-footer > button:hover{
    font-size: 21px;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body > .calendar-basic-row{
    width: 100%;
    height: auto;
    overflow: hidden;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data{
    width: 100%;
    height: 36px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 24px;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > .row-info-data{
    width: 100%;
    height: 34px;
    padding-bottom: 12px;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.47px;
    color: #fff;
    overflow: hidden;
}

.calendar-basic-row > .calendar-row-data > .row-info-data > .calendar-time-row,.calendar-basic-row > .calendar-row-data > .row-info-data > .calendar-add-time-row {
    width: 100%;
    height: 25px;
    margin-bottom: 12px;
}

.calendar-basic-row > .calendar-row-data > .row-info-data > .calendar-time-row > button {
    width: 150px;
    height: 27px;
    margin: 0 0 9px 24px;
    padding: 6px 12px 5px;
    border-radius: 2px;
    background-color: #4a4a4a;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    outline: none;
    font-family: AppleSDGothicNeo,sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.44px;
    color: #fff;
    border: none;
    cursor: pointer;
}

.calendar-basic-row > .calendar-row-data > .row-info-data > .calendar-add-time-row > button{
    width: 110px;
    height: 25px;
    border-radius: 15px;
    border: solid 1px #4a4a4a;
    outline: none;
    font-family: AppleSDGothicNeo,sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.44px;
    color: #fff;
    background: none;
    cursor: pointer;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > label{
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ccc;
    width: 76px;
    text-align: left;
    height: 28px;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}
.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > input[type="text"]{
    width: 478px;
    height: 36px;
    padding: 8px;
    border-radius: 3px;
    background-color: #4a4a4a;
    color: white;
    outline: none;
    border: none;
    box-sizing: border-box;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > select{
    width: 478px;
    height: 36px;
    padding: 8px;
    border-radius: 3px;
    background-color: #4a4a4a;
    color: white;
    outline: none;
    border: none;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > select > option{
    background-color: #4a4a4a;
    color: white;
}

.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data .schedule-mini-popup{
    position: absolute;
    width: 381px;
    height: 114px;
    padding: 12px;
    border-radius: 3px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
    border: solid 1px #7c7c7c;
    background-color: #414141;
    top: 0px;
    z-index: 1;
    right: -391px;
    animation: fadein 500ms;
    -moz-animation: fadein 500ms; /* Firefox */
    -webkit-animation: fadein 500ms; /* Safari and Chrome */
    -o-animation: fadein 500ms; /* Opera */
}

.broj-calendar-background > .broj-calendar-parent .uint-category-box{
    margin: 0px 12px 12px 0px;
    border-radius: 3px;
    height: 22px;
    color: white;
    display: inline-flex;
    padding: 0px 6px;
}


.broj-calendar-date-box {
    height: 31px;
    width: 125px;
    padding: 0px 20px 0px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #4a4a4a;
    position: relative;
}

.broj-calendar-date-box input {
    color: white;
    font-size: 12px;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    font-weight: normal;
    outline: none;
}

.broj-calendar-date-box img {
    position: absolute;
    right: 0px;
    top: 8px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.broj-calendar-time-input {
    outline: none;
    border: none;
    background: none;
    width: 113px;
    height: 27px;
    padding-bottom: 3px;
    border-bottom: 1px solid #4a4a4a;
    color: white;
}
.broj-calendar-check-box{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.broj-calendar-check-box > input{
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.broj-calendar-check-box > label{
    color: white;
    cursor: pointer;
}

.calendar-count-input {
    width: 180px;
    height: 33px;
    border-radius: 3px;
    border-bottom: 1px solid rgb(73, 73, 73);
    display: inline-flex;
    padding: 0px 93px 6px 16px;
    position: relative;
    margin: 0px 12px;
}
.calendar-count-input > img {
    width: 16px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}
.calendar-count-input > input {
    color: white;
    font-size: 12px;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    font-weight: normal;
    text-align: center;
    outline: none;
}
.calendar-count-input > label {
    font-family: NotoSansKR, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    position: absolute;
    right: 0px;
    top: 6px;
    width: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.calendar-day-unit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 35px;
    border-radius: 35px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.54px;
    color: #fff;
    background: #666;
    margin-right: 12px;
    cursor: pointer;
}

.calendar-day-unit.active {
    background: #E87130;
}

.calendar-toggle-box {
    width: max-content;
    height: max-content;
    flex-direction: row !important;
}
.calendar-toggle-box p.toggle-label {
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    padding: 5px 0;
}

.calendar-toggle-box .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    margin: 0px;
}

.calendar-toggle-box .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calendar-toggle-box .switch .slider.round {
    border-radius: 34px;
}

.calendar-toggle-box .switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 15px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.calendar-toggle-box .switch .slider.round:before {
    border-radius: 50%;
}

.calendar-toggle-box .switch input.active + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.calendar-toggle-box .switch .slider.active {
    background: #E87130;
}
.broj-calendar-background > .broj-calendar-parent .calendar-search-zone {
    border-radius: 3px;
    background-color: #4a4a4a;
    padding: 7px 40px 7px 12px;
    box-sizing: border-box;
    position: relative;
    width: 478px;
    height: 36px;
}
.broj-calendar-background > .broj-calendar-parent .calendar-search-zone > input {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: white;
    background: none;
}
.broj-calendar-background > .broj-calendar-parent .calendar-search-zone > img {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 12px;
}
.broj-calendar-background > .broj-calendar-parent .calendar-search-list {
    width: 478px;
    border-radius: 3px;
    background-color: #4a4a4a;
    height: 137px;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    top: 38px;
    padding: 12px;
    z-index: 1;
}

.broj-calendar-background > .broj-calendar-parent .calendar-search-list > label {
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    width: 100%;
    height: 18px;
    justify-content: flex-start;
    cursor: pointer;
    flex-direction: row;
}
.broj-calendar-background > .broj-calendar-parent > .broj-calendar-body .calendar-basic-row > .calendar-row-data > .calendar-standard-input{
    border-radius: 3px;
    background-color: #4a4a4a;
    padding: 7px 12px;
    box-sizing: border-box;
    position: relative;
    width: 478px;
    height: 36px;
    outline: none;
    border: none;
    color: #fff;
}

.broj-calendar-background > .broj-calendar-parent .calendar-search-list > label:hover {
    transform: scale(0.98);
}

.broj-calendar-background > .broj-calendar-parent .calendar-search-list > label + label {
    margin-top: 12px;
}

.broj-calendar-background > .broj-calendar-parent .calendar-search-list > label > div {
    width: 60px;
    text-align: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.calendar-custom-menu{
    border-radius: 3px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    border: solid 1px #7c7c7c;
    background-color: #4a4a4a;
    z-index: 100;
    position: absolute;
    overflow: hidden;
    padding: 0;
    width: max-content;
    cursor: pointer;
}
.calendar-custom-menu .calendar-custom-menu-item {
    text-align: center;
    font-size: 16px;
    padding: 6px 12px;
    margin: 0 3px;
    border-radius: 3px;
    color: #ccc;
    cursor: pointer;
}
.calendar-custom-menu .calendar-custom-menu-item:hover{
    color: white;
}

.calendar-custom-menu .calendar-custom-menu-item.none-active{
    pointer-events: none;
    color: #7c7c7c;
}

li.schedule-move-highlight,div.schedule-move-highlight{
    border-color: #1e88e5 !important;
}

td.schedule-move-tartget-highlight,div.schedule-move-tartget-highlight{
    border: 2px solid #4a4a4a !important;
    background: #4a4a4a;
}

#broj-calendar-parent .schedule-description-popup{
    width: 240px;
    height: max-content;
    position: absolute;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
    z-index: 10;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
    border: solid 1px #8785c0;
    background-color: #222;
    animation: fadein 500ms;
    -moz-animation: fadein 500ms; /* Firefox */
    -webkit-animation: fadein 500ms; /* Safari and Chrome */
    -o-animation: fadein 500ms; /* Opera */
}

#broj-calendar-parent .schedule-description-popup > div:nth-child(1){
    border-bottom: solid 1px #8785c0;
    width: 100%;
    height: 91px;
    padding: 12px;
    background-color: #222;
    box-sizing: border-box;
    border-radius: 8px 8px 0px 0px;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(1) > ul{
    width: 100%;
    height: 100%;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(1) > ul > li{
    width: 100%;
    flex: 1;
    justify-content: start;
    display: flex;
    align-items: center;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: white;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(1) > ul > li .rectangle{
    margin: 0px 6px;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(2){
    border-bottom: solid 1px #8785c0;
    width: 100%;
    min-height: 40px;
    max-height: 180px;
    padding: 12px;
    background-color: #222;
    box-sizing: border-box;
    font-family: NotoSansKR, sans-serif;
    font-size: 10px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    border-radius: 8px;
}
#broj-calendar-parent .schedule-description-popup .uint-category-box{
    margin: 0px 6px;
    border-radius: 3px;
    height: 22px;
    color: white;
    padding: 0px 6px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(2) > ul{
    width: 100%;
    height: max-content;
}
#broj-calendar-parent .schedule-description-popup > div:nth-child(2) > ul > li{
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    font-family: NotoSansKR,sans-serif;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: white;
    margin-bottom: 6px;
}

.brojlist-td-data > .category-box {
    padding: 2px 12px;
    margin: 6px 12px 6px 0px;
    height: 22px;
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.67px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    width: max-content;
    flex-shrink: 1;
    display: inline-flex;
    position: relative;
    overflow: visible;
}
.schedule-slide-popup {
    position: absolute;
    top: 0px;
    box-sizing: border-box;
    right: -500px;
    height: 100%;
    /* -webkit-animation: slide 0.5s forwards; */
    /* -webkit-animation-delay: 0s; */
    /* animation: slide 0.5s forwards; */
    /* animation-delay: 0s; */
    z-index: 9;
    color: white;
    width: 416px;
    padding: 24px;
    box-shadow: -6px 2px 8px 0 rgba(0, 0, 0, 0.5);
    background-color: #222;
}

.schedule-slide-popup > div:nth-child(1) {
    width: 100%;
    height: 54px;
    padding-bottom: 24px;
    justify-content: space-between;
    flex-direction: row;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.schedule-slide-popup > div:nth-child(1) > img{
    width: 28px;
    height: 28px;
    position: relative;
    right: -5px;
    cursor: pointer;
}

.schedule-slide-popup > div:nth-child(2) {
    width: 100%;
    height: calc(100% - 54px);
}

.schedule-slide-popup > div:nth-child(2) > div:nth-child(1) {
    width: 100%;
    padding-left: 37px;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 6px;
}

.schedule-slide-popup > div:nth-child(2) > div:nth-child(2) {
    width: calc(100% + 10px);
    height: calc(100% - 32px);
    right: 0px;
    position: relative;
    box-sizing: border-box;
}

.schedule-slide-popup > div:nth-child(2) > div:nth-child(2) > label{
    width: 100%;
    height: 30px;
    flex-direction: row;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}
.schedule-slide-popup > div:nth-child(2) > div:nth-child(2) > label > div.line{
    height: 1px;
    width: calc(100% - 36px);
    background: #4a4a4a;
}

.schedule-slide-popup .schedule-box{
    width: calc(100% - 38px);
    height: 91px;
    margin: 6px 0px 6px 37px;
    padding: 12px;
    border-radius: 8px;
    border: solid 2px #656d78;
}

.schedule-slide-popup .schedule-box > div{
    flex: 1;
    width: 100%;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.schedule-slide-popup .schedule-box > div > input[type='checkbox']{
    width: 14px;
    height: 14px;
    margin-right: 12px;
}

.schedule-slide-popup .schedule-box .uint-category-box{
    border-radius: 3px;
    height: 22px;
    color: white;
    display: inline-flex;
    padding: 0px 6px;
    margin-left: 6px;
}
.schedule-slide-popup .schedule-box .rectangle{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #5d9dec;
    display: inline-flex;
}
.schedule-slide-popup .schedule-box .rectangle.finish{
    background-color: rgb(149, 0, 136);
}
.schedule-slide-popup .schedule-box .rectangle.saturation{
    background-color: #ffce55;
}
.schedule-slide-popup .schedule-box .rectangle.full{
    background-color: #fa6400;
}
.schedule-slide-popup .schedule-box .rectangle.relaxed{
    background-color: #43b79f;
}

.mini-calendar-lesson-list{
    width: 100%;
    height: max-content;
    position: relative;
    color: white;
    font-size: 12px;
}

.mini-calendar-lesson-list table{
    width: 100%;
}
.mini-calendar-lesson-list tr{
    margin-bottom: 6px;
    display: flex;
    text-align: center;
    justify-content: space-between;
}

.mini-calendar-lesson-list td{
    align-items: center;
}

.white-text-opacity-half {
    color: rgba(255, 255, 255, 0.50) !important;
    font-weight: 400 !important;
}

.white-text-opacity-half .rectangle {
    opacity: 50% !important;
}