::-webkit-scrollbar {
    background: transparent;
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #4984BA;

}

::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: Roboto, serif;
    overflow: hidden;
    scroll-behavior: smooth;
}

body.loaded {
    overflow-x: hidden;
    overflow-y: auto;
}

a {
    text-decoration: none;
}

.content {
    margin-top: 7vw !important;
    min-height: 75vh;
}

.header {
    z-index: 100;
    position: fixed;
    top: 0;
    height: 80px;
    padding-left: 13vw;
    padding-right: 13vw;
    width: calc(100% - 26vw);
    background: #4984BA;
    display: inline-flex;
}

.header .main {
    display: flex;
}

.header .logo {
    display: contents;
}

.header .back {
    display: none;
    cursor: pointer;
}

.header .logo img {
    height: 80%;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.header .title {
    font-weight: bold;
    font-size: 36px;
    margin-left: 32px;
    margin-top: auto;
    margin-bottom: auto;
    display: inline-block;
    color: #FFFFFF;
}

.header .menu {
    margin-right: 0;
    margin-left: auto;
    display: flex;
}

.header .menu a {
    text-decoration: none;
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    margin: auto 24px;
}

.header .menu a:last-child {
    margin: auto 0 auto 24px;
}

.content {
    margin: 2vw 13vw;
}

.section:first-child {
    margin-top: 0;
}

.section {
    position: relative;
    margin-top: 5vw;
}

.content .sectionTitle {
    font-size: 36px;
    font-weight: 600;
    display: inline-block;
    color: #000000;
}

.content .sectionButton {
    margin-left: 8px;
}

.content .sectionButton:hover {
    cursor: pointer;
}

.content .sectionList {
    display: flex;
    width: 100%;
}

.content #daily {
    flex-wrap: wrap;
}

.sectionList .sectionListItems {
    flex: 0 0 31%;
    margin-right: 1.5vw;
    margin-bottom: 36px;
}

.sectionList .sectionListItems .sectionListItem {
    margin-top: 16px;
    border: 1px solid #A8AAAD;
    background: #fff;
    position: relative;
    border-radius: 5px;
    padding: 11px 12px 10px 20px;
    text-decoration: none;
}

.sectionListItem .sectionListItemActions {
    display: inline-flex;
}

.sectionListItemActions div {
    margin-top: auto;
    margin-bottom: auto;
}

.sectionListItemActions img {
    width: 0.85vw;
}

.sectionListItem span {
    font-size: 14px;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
}

.sectionListItem .date {
    font-size: 14px;
    opacity: 0;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    color: #A8AAAD;
}

.sectionListItem .sectionListItemActions .sectionListItemAction {
    margin-left: 1vw;
    display: flex;
}

.footer {

    background: #4984BA;
    margin-top: 128px;
    padding: 32px 13vw;
    display: flex;
}

.footer .footerLinks:first-child {
    flex: 0 0 45%;
}

.footer .footerLinks {
    flex: 0 0 45%;
}

.footer .footerLinks:last-child {
    flex: 0 0 15%;
}

.footerLinks a:first-child {
    margin-top: 0;
}

.footerLinks a {
    font-size: 24px;
    display: table;
    margin-top: 1vw;
    line-height: 28px;
    text-decoration: none;
    color: #CDCDCD
}

.editDialog {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    width: 20vw;
    background: #6F9DC6;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    transition: 0.5s all;
    opacity: 0;
    pointer-events: none;
    height: 11vw;
}

.editDialog.show {
    transition: 0.5s all;
    opacity: 1;
    pointer-events: auto;
}

.editDialog .button {
    text-align: center;
    margin: 2vw;
    height: 2.5vw;
    color: #FFFFFF;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    cursor: pointer;
}

.editDialog img {
    width: 4vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5vw;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.editDialog p {
    color: #000000;
    font-weight: bold;
    font-size: 1.3vw;
    margin-left: 2vw;
    margin-right: 2vw;
    text-align: center;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.editDialog span {
    margin: auto;
    font-weight: 500;
    font-size: 0.85vw;
}

.editDialog .restoreButton {
    background: #EEB0AE;
    border-radius: 5px;
}

.editDialog .saveButton {
    background: #4984BA;
    border-radius: 5px;
}

.editDialog > div {
    transition: 0.5s all;
    position: absolute;
    top: 0;
    width: 100%;
}

.editDialog > div:first-child {
    opacity: 1;
    z-index: 1000;
}

.editDialog > div.hidden {
    opacity: 0;
}

.loadingView p {
    margin-top: 3.5vw;
}

.loadingView .line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #fff;
    margin-right: 0.25vw;
}

.loadingView .animation {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.loadingView .load-2 {
    display: grid;
}

.load-2 .line:nth-last-child(1) {
    animation: loadingC 0.6s 0.1s linear infinite;
}

.load-2 .line:nth-last-child(2) {
    animation: loadingC 0.6s 0.2s linear infinite;
}

.load-2 .line:nth-last-child(3) {
    animation: loadingC 0.6s 0.3s linear infinite;
}

@keyframes loadingC {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.sectionLink {
    position: absolute;
    top: -5vw;
}

#pageTop {
    z-index: 10000;
    position: fixed;
    width: 100vw;
    display: none;
    top: 0;
    height: 10vw;
}

#pageBottom {
    z-index: 10000;
    position: fixed;
    bottom: 0;
    display: none;
    width: 100vw;
    height: 10vw;
}

.dropImage {
    position: relative;
    display: grid;
    border: 1px dashed #74A2D6;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    width: 445px;
    height: 260px;
    cursor: pointer;
}

.dropImage .dropImageInner {
    margin: auto;
}

.dropImage.loaded {
    border: 0;
}

.dropImage .dropImageIcon {
    width: 73px;
}

.dropImage .dropImageText {
    font-size: 16px;
    color: #4983B8;
}

.dropImageBack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 8px;
    object-fit: cover;
}

.dropImageFront {
    display: none;
}

.sectionList .dropImage {
    margin-top: 16px;
    height: 174px;
    width: 100%;
}

.select.hidden {
    display: none;
}

#news {
    margin-top: 16px;
}

#news .dropImage {
    margin-top: 0;
    width: 385px;
    height: 232px;
}

.dropImage.loaded .dropImageFront {
    opacity: 0;
    transition: .5s all;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    left: 0;
    right: 0;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: rgba(6, 5, 4, 0.74);
    border: 2px dashed #4984BA;
}

.dropImage.loaded:hover .dropImageFront {
    transition: .5s all;
    opacity: 1;
}

.dropImageFront .dropImageFrontIcon {
    width: 64px;
    margin-top: 64px;
}

.dropImageFront .dropImageFrontText {
    font-size: 0.75vw;
    color: #4983B8;
    margin-top: 0.75vw;
}

.dropImage.loaded .dropImageBack {
    display: block;
}


input[type="text"], input[type="email"], input[type="date"], input[type="password"] {
    margin-bottom: 32px;
}

input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select, .colorPicker {
    font-family: Inter, serif;
    resize: none;
    background: #FFFFFF;
    border: 1px solid #CFD0D7;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 20px 30px;
    outline: none;
    display: block;
    width: 24vw;
    color: #000;
    font-size: 18px;
}

select {
    width: 20vw !important;
    padding-right: 50px;
}

.colorPicker {
    display: flex;
    padding: 5px 30px;
    margin-bottom: 32px;
    width: 30vw;
    height: 63px;
    margin-left: 32px;
}

.colorPicker .picker {
    width: 45px;
    height: 45px;
    border: solid 2px #000;
    overflow: hidden;
    border-radius: 100%;
}

.colorPicker div:last-child {
    display: block;
    margin-top: auto;
    margin-left: 18px;
    margin-bottom: auto;
    font-size: 18px;
    width: calc(100% - 45px);
}

input[type="color"] {
    width: 100%;
    height: 100%;
    background: #000 0 0 no-repeat padding-box;
    box-shadow: 0 3px 6px #000;
    transform: scale(1.5);
}

.sectionList input[type="text"],
.sectionList input[type="email"],
.sectionList input[type="date"],
.sectionList input[type="password"],
.sectionList textarea, .sectionList select {
    width: 30vw;
}

.select {
    position: relative;
    margin-bottom: 13px;
}

.select:last-child {
    margin-bottom: 0;
}

select {
    background: #EFEFEF;
    border: 1px solid #707070;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.select:after {
    content: " ";
    display: block;
    background: url("../images/arrow.svg") no-repeat;
    height: 15px;
    width: 24px;
    position: absolute;
    right: 24px;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

.inputText.long textarea {
    height: 166px;
}

input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder {
    color: transparent;
}

.sectionList input {
    margin-bottom: 21px;
}

.inputText, select {
    margin-left: 32px;
    position: relative;
}

.editMusic .inputText {
    margin-left: 0;
}

.inputText.long .inputLabel {
    top: 20%;
}

.inputLabel {
    color: #B4AEAE;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    background: #FFFFFF;
    padding-left: 0.1vw;
    padding-right: 0.1vw;
    z-index: 1;
    font-size: 1vw;
    transition: 0.5s all;
    pointer-events: none;
}

input:focus + label,
input:not(:placeholder-shown) + label,
textarea:focus + label,
textarea:not(:placeholder-shown) + label {
    top: 0 !important;
    font-weight: 500;
    font-size: 0.75vw;
    color: #4984BA;
    transition: 0.5s all;
}

#news .select {
    margin-bottom: 20px;
}

.clearText {
    cursor: pointer;
    display: inline-block;
    text-decoration: underline;
    color: #888888;
    margin-left: 18px;
    font-size: 18px;
}

.sectionList .dropMusicHolder {
    width: 20vw;
    height: 64px;
    display: block;
    border: 1px dashed #4984BA;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 1.3vw;
    color: rgba(60, 121, 176, 0.8);
    transition: 0.5s all;
    position: relative;
}

.sectionList .dropMusicHolder.editMode {
    cursor: initial;
}

.sectionList .dropMusicHolder.editMode .editMusic {
    display: block;
}

.sectionList .dropMusicHolder.hovered {
    transition: 0.5s all;
    background: rgba(109, 164, 214, 0.35);
}

.sectionList .dropMusicHolder.editMode .dropMusic {
    display: none;
}

.sectionList .dropMusic {
    z-index: -1;
    position: absolute;
    top: 50%;
    display: block;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sectionList .dropMusicHolder img {
    width: 5vw;
}

.sectionList .dropMusicHolderText {
    margin-top: 2vw;
}

.sectionList .audioListHolder {
    width: 20vw;
    display: initial;
}

.sectionList .audioList {
    margin-left: 32px;
}

.sectionList .audioList .audioItem {
    border: 1px solid #A8AAAD;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    position: relative;
    width: 20vw;
    flex-direction: column;
    background: #FFFFFF;
    margin-bottom: 1vw;
    height: 64px;
}

.sectionList .audioList .audioItemInner {
    display: flex;
    padding: 16px;
}

.sectionList .audioList .audioItem input {
    width: 100%;
    padding: 10px 15px;
    margin: 0;
    border-top: 1px solid #A8AAAD;
    border-left: 0 solid #A8AAAD;
    border-right: 0 solid #A8AAAD;
    border-radius: 0;
    background: transparent;
    border-bottom: 0 solid #A8AAAD;
}

.sectionList .audioList .audioItem input::placeholder {
    color: #B4AEAE;
}

.sectionList .audioList .audioItem:last-child {
    margin-bottom: 0;
}

.sectionList .audioItem .playIcon {
    cursor: pointer;
}

.sectionList .audioItem .playIcon img {
    width: 32px;
}

.sectionList .audioItem .dragIcon {
    margin: auto 0.5vw auto 0;
}

.sectionList .audioItem .dragIcon img {
    width: 1.25vw;
}

.sectionList .audioItem .removeIcon {
    margin: auto 22px auto 0;
    cursor: pointer;
}

.sectionList .audioItem .removeIcon img {
    width: 21px;
}

.sectionList .audioItem .imageIcon {
    margin: auto 22px auto auto;
    cursor: pointer;
    position: relative;
}

.sectionList .audioItem .imageIcon img {
    width: 1.75vw;
}

.sectionList .audioItem.hasImage .imageIcon:after {
    position: absolute;
    content: '';
    background: url("../images/okay.svg");
    width: 24px;
    height: 24px;
    bottom: -4px;
    right: -12px;
}

.sectionList .audioItem .audioInfo {
    margin-left: 16px;
    display: grid;
    flex: 100%;
}

.sectionList .audioItem .audioInfo .audioDuration {
    font-size: 0.75vw;
    font-family: Roboto, serif;
    color: #4B4B4B;
    display: flex;
    align-items: center;
}

.sectionList .musicNameHolder {
    font-size: 1vw;
    font-weight: 500;
    display: table;
}

.sectionList .musicNameHolder .musicNameTitle {
    color: #000000;
}

.sectionList .musicButtons {
    width: calc(100% - 6vw);
    display: inline-flex;
    margin-top: 1vw;
}

.sectionList .musicButtons div {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 0.85vw;
    padding-top: 0.75vw;
    text-align: center;
    padding-bottom: 0.75vw;
    border-radius: 5px;
    width: 45%;
}

.sectionList .musicButtons .musicRemove {
    background: #EEB0AE;
    cursor: pointer;
}

.sectionList .musicButtons .musicAdd {
    background: #4984BA;
    margin-left: auto;
    cursor: pointer;
}

.sectionList .audioItem .audioInfo .audioTitle {
    font-size: 1vw;
    margin: 0;
    font-family: Roboto, serif;
    font-weight: bold;
    color: #000000;
    border: 0;
    border-radius: 0;
    padding: 0;
    outline: none;
}

.sectionList .dropMusicHolder.hovered {
    transition: 0.5s all;
    background: rgba(109, 164, 214, 0.35);
}