#navbar_space{height: 55px;}
#navbar{position: fixed; z-index: 55; top: 0px; left: 0px; width: 100%; box-shadow: 0px 0px 5px var(--bg_silver); background: var(--bg_white);}
#navbar > div{height: 55px; max-width: 1000px; padding: 0px 15px; box-sizing: border-box; display: grid; grid-template-columns: 1fr min-content 1fr; grid-gap: 20px; align-items: center;}
#navbar > div > div{width: 100%;}
#navbar .nLogo{width: 100px;}
#navbar .nLogo > div{padding-bottom: 38%;}
#navbar .nOpt > div{display: inline-block; vertical-align: middle;}
#navbar .nOpt .noItem{padding: 10px 0px; width: 60px; text-align: center; cursor: pointer;}
#navbar .nOpt .noItem > div:first-child > div{width: 15px; height: 15px;}
#navbar .nOpt .noItem > div:nth-child(2){font-size: 11px; font-weight: bold; margin-top: 2px;}
#navbar .nOpt .noKunci{display: grid; grid-template-columns: 15px 1fr; align-items: center; width: 50px; border-radius: 50px; padding: 4px 15px 5px 15px; background: var(--bg_orangecalm); cursor: pointer;}
#navbar .nOpt .noKunci > div{width: 100%;}
#navbar .nOpt .noKunci > div:first-child > div{width: 15px; height: 15px;}
#navbar .nOpt .noKunci > div:nth-child(2){text-align: center;}

section{max-width: 950px;}
section .distance{padding: 0px 20px;}
.contentHeight{min-height: calc(100vh - 100px);}
.contentSpace{height: 25px;}

.headTitle{padding: 45px 10px; font-size: 25px; font-family: 'extrabold'; text-align: center;}

.sectionTitle{font-size: 15px; font-weight: bold;}

.page_empty{padding: 50px 0px; text-align: center; font-weight: bold;}
.page_info{padding: 10px 15px; border-radius: 10px; background: var(--bg_orangecalm);}
.page_info > div:first-child{font-size: 11px; font-weight: bold; margin-bottom: 3px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; grid-gap: 10px; align-items: center; padding: 10px 15px; box-sizing: border-box; background: var(--bg_silvercalm);}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold; font-size: 15px;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popupLogin{display: grid; grid-template-columns: 1fr 250px; align-items: center; min-height: 300px; position: relative;}
.popupLogin > div{width: 100%;}
.popupLogin > div:first-child{height: 100%; position: relative;}
.popupLogin .plCover{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover;}
.popupLogin .plClose{position: absolute; right: 15px; top: 15px;}
.popupLogin .plClose > div{width: 20px; height: 20px; cursor: pointer;}
.popupLogin .plContent{padding: 0px 20px; text-align: center;}
.popupLogin .plContent .pcTitle{font-size: 15px; font-weight: bold; margin-bottom: 10px;}
.popupLogin .plContent .pcBtn button{width: 100%;}
.popupLogin .plContent .pcDesc{margin-top: 15px; color: var(--text_silver); font-size: 11px;}

.popupCreateNew{padding: 15px;}
.popupCreateNew .pcnHead{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-radius: 10px; overflow: hidden;}
.popupCreateNew .pcnHead > div{width: 100%; height: 100px; background-size: cover;}
.popupCreateNew .pcnContent{margin: 25px 0px 15px 0px; text-align: center;}
.popupCreateNew .pcnContent .pcTitle{font-size: 15px; font-weight: bold; margin-bottom: 15px;}
.popupCreateNew .pcnContent .pcBtn{display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr;}
.popupCreateNew .pcnContent .pcBtn > div{width: 100%;}
.popupCreateNew .pcnContent .pcBtn button{width: 100%;}
.popupCreateNew .pcnContent .pcDesc{margin-top: 15px; color: var(--text_silver); font-size: 11px;}

.popupPreview{display: grid; grid-template-columns: 1fr 200px; grid-gap: 15px; padding: 10px; box-sizing: border-box;}
.popupPreview > div{width: 100%;}
.popupPreview .ppImg{max-height: calc(100vh - 300px);}
.popupPreview .ppImg > img{max-width: 100%; max-height: 100%;}
.popupPreview .ppOpt{display: grid; margin-top: 15px; grid-gap: 10px; grid-template-columns: 1fr 1fr;}
.popupPreview .ppOpt > div{width: 100%;}
.popupPreview .ppOpt button{width: 100%;}

.popupNotSupportScreen{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 150; text-align: center; justify-content: center; align-items: center; flex-direction: column;}
.popupNotSupportScreen img{width: 105px; margin-bottom: 20px;}
.popupNotSupportScreen p{font-size: 20px; font-weight: bold;}

.popupScroll{max-height: calc(100vh - 200px); overflow: auto;}

.popupProfile{border-radius: 5px; border: 1px solid var(--bg_silver); padding: 10px; box-sizing: border-box; display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;}
.popupProfile > div{width: 100%;}
.popupProfile > div:first-child > div{width: 30px; height: 30px; border-radius: 50%; background-color: var(--bg_silvercalm);}
.popupProfile > div:nth-child(2){font-weight: bold;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

#loadingAI{display: none;}
#loadingAI > div{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 100;}
#loadingAI .laAnimate{width: 150px; height: 150px; background: var(--bg_white); border-radius: 10px;}
#loadingAI .laAnimate > div{width: 130px; height: 130px; position: relative; top: 10px; background-size: cover; background-image: url('../../../images/loading_ai.gif');}
#loadingAI .laText{margin-top: 20px; color: var(--text_white);}

.info{padding: 7px 10px 8px 15px; background: var(--bg_silvercalm); border-left: 2px solid var(--bg_blue);}

.listDownloadQuality > div:first-child{font-weight: bold;}
.listDownloadQuality > div:nth-child(2){border-radius: 10px; margin-top: 10px; overflow: hidden; border: 1px solid var(--bg_line);}
.listDownloadQuality > div:nth-child(2) > div{padding: 5px 10px; transition: var(--transition); cursor: pointer;}
.listDownloadQuality > div:nth-child(2) > div:hover{background: var(--bg_silversoft);}
.listDownloadQuality > div:nth-child(2) > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.listDownloadQuality .ldqItem{display: grid; min-height: 60px; grid-template-columns: 20px 1fr; grid-gap: 15px; align-items: center;}
.listDownloadQuality .ldqItem > div{width: 100%;}
.listDownloadQuality .ldqItem > div:first-child > div{width: 20px; height: 20px;}
.listDownloadQuality .ldqItem .liName{font-weight: bold;}
.listDownloadQuality .ldqItem .liDesc{color: var(--text_silver); font-size: 11px;}
.listDownloadQuality .ldqItem .liKunci{font-size: 11px; margin-top: 5px; padding: 2px 7px; border-radius: 50px; background: var(--bg_orangecalm); display: inline-block; color: var(--text_orange);}

.previewContainer{display: none;}
.previewContainer > div{display: grid; grid-template-columns: 1fr 125px; grid-gap: 15px;}
.previewContainer > div > div{width: 100%;}
.previewContainer .pcImg{text-align: center;}
.previewContainer .pcImg img{max-width: 100%; max-height: 200px; border-radius: 5px; display: none;}

/**EDITOR**/
#editorLayout{display: grid; grid-template-columns: 250px 1fr; grid-gap: 25px; margin-top: 25px;}
#editorLayout > div{width: 100%;}
#editorLayout .elSticky{position: sticky; top: 80px;}
#editorLayout .elMenu{border-radius: 10px; overflow: hidden; border: 1px solid var(--bg_line); background: var(--bg_white);}
#editorLayout .elMenu > div{padding: 10px; position: relative; display: grid; cursor: pointer; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center; transition: var(--transition);}
#editorLayout .elMenu > div:hover{background: var(--bg_silversoft);}
#editorLayout .elMenu > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
#editorLayout .elMenu > div:before{content: ''; opacity: 0; width: 3px; background: var(--bg_blue); border-radius: 10px; height: 65%; position: absolute; right: 5px; top: 7px;}
#editorLayout .elMenu > div.active:before{opacity: 1;}
#editorLayout .elMenu > div.disabled{opacity: 0.5;}
#editorLayout .elMenu > div > div{width: 100%;}
#editorLayout .elMenu > div > div:first-child > div{width: 15px; height: 15px;}
#editorLayout .elOpt{margin-top: 10px;}
#editorLayout .elOpt > div{display: inline-block; padding: 10px; transition: var(--transition); border-radius: 10px; border: 1px solid var(--bg_line); cursor: pointer;}
#editorLayout .elOpt > div:not(:last-child){margin-right: 10px;}
#editorLayout .elOpt > div:hover{background: var(--bg_silvercalm);}
#editorLayout .elOpt > div > div{width: 15px; height: 15px;}
#editorLayout .elInfo{text-align: center; font-size: 11px; margin-top: 10px; color: var(--text_silver);}

.editorCanvas{min-height: calc(100vh - 150px); background: var(--bg_silversoft); border-radius: 10px;}
#canvasArea{width: 700px; height: auto; position: relative;}
#canvasArea canvas{cursor: crosshair; display: none;}

.editorRangeZoomOut{margin-top: 15px;}
.editorRangeZoomOut > div:not(:last-child){margin-bottom: 10px;}
.editorRangeZoomOut .erzItem{display: grid; grid-template-columns: 90px 1fr 35px; align-items: center; grid-gap: 15px;}
.editorRangeZoomOut .erzItem > div{width: 100%;}
.editorRangeZoomOut .erzItem > div:first-child{font-weight: bold;}
.editorRangeZoomOut .erzItem input{width: 100%;}
.editorRangeZoomOut .erzItem > div:nth-child(3){text-align: right;}
.editorRangeZoomOut .erzItem > div:nth-child(3) > span{position: relative; top: -3px;}

/**LOGIN**/
.login_box{padding: 25px; border: 2px solid var(--bg_silvercalm); border-radius: 10px; max-width: 550px; margin-top: 25px; margin-bottom: 35px;}
.login_box > div > div:first-child{font-size: 17px; font-family: 'bold';}

/**ERROR**/
.error_page{max-width: 500px; background: var(--bg_silvercalm); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; background: var(--bg_orangecalm); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}