@font-face {
    font-family: Inter;
    src: url(../font/Inter.ttf) format("truetype");
}

:root {
    --dark-blue: #1872ca;
    --blue: #1e90ff;
    --light-blue: #8ec3ff;
    --light-blue2: #c6e0fd;
    --light-light-blue: #f1f7ff;


    --black: #000000;
    --light-black: #151515;
    --light-light-black: #1e1e1e;
    --dark-gray: #2d2d2d;
    --dark-dark-gray: #444444;
    --gray: #999999;
    --light-gray: #f1f1f1;
    --light-light-gray: #f1f1f1;
    --white: #ffffff;

    --red: #ca1032;
    --dark-red: #980d37;
    --light-red: #d2596f;
    --light-red2: #ffbac7;
    --light-light-red: #ffe4eb;

    --green: #38b80e;
    --dark-green: #12980d;
    --light-green: #6fd259;
    --light-green2:#a3e794;
    --light-light-green: #e0ffd3;

    --teal: #10b7ca;
    --dark-teal: #0d8898;
    --light-teal: #59c1d2;
    --light-teal2:#b8ebf1;
    --light-light-teal: #e4faff;

    --yellow: #ffff00;
    --orange: #ff8c00;
    --purple: #a02bef;
    --pink: #ff00ff;





    --light-yellow: #ffffc0;
    --light-orange: #ffe4c1;
    --light-purple: #e5c3ff;
    --light-pink: #ffbeff;

}



/* =========================== Padding ===========================*/
.p_10{
    padding: 10px;
}
.p_20{
    padding: 20px;
}
.p_30{
    padding: 30px;
}
.p_40{
    padding: 40px;
}
.p_50{
    padding: 50px;
}
.pt_10 {
    padding-top: 10px;
}
.pt_20 {
    padding-top: 20px;
}
.pt_30 {
    padding-top: 30px;
}
.pt_40 {
    padding-top: 40px;
}
.pt_50 {
    padding-top: 50px;
}
.pl_10 {
    padding-left: 10px;
}
.pl_20 {
    padding-left: 20px;
}
.pl_30 {
    padding-left: 30px;
}
.pl_40 {
    padding-left: 40px;
}
.pl_50 {
    padding-left: 50px;
}
.pr_10 {
    padding-right: 10px;
}
.pr_20 {
    padding-right: 20px;
}
.pr_30 {
    padding-right: 30px;
}
.pr_40 {
    padding-right: 40px;
}
.pr_50 {
    padding-right: 50px;
}
.pb_10 {
    padding-bottom: 10px;
}
.pb_20 {
    padding-bottom: 20px;
}
.pb_30 {
    padding-bottom: 30px;
}
.pb_40 {
    padding-bottom: 40px;
}
.pb_50 {
    padding-bottom: 50px;
}
.ptb_10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.plr_10 {
    padding-left: 10px;
    padding-right: 10px;
}

/* =========================== Margin ===========================*/
.mt_10 {
    margin-top: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.mt_30 {
    margin-top: 30px;
}
.mt_40 {
    margin-top: 40px;
}
.mt_50 {
    margin-top: 50px;
}
.ml_10 {
    margin-left: 10px;
}
.ml_20 {
    margin-left: 20px;
}
.ml_30 {
    margin-left: 30px;
}
.ml_40 {
    margin-left: 40px;
}
.ml_50 {
    margin-left: 50px;
}
.mr_10 {
    margin-right: 10px;
}
.mr_20 {
    margin-right: 20px;
}
.mr_30 {
    margin-right: 30px;
}
.mr_40 {
    margin-right: 40px;
}
.mr_50 {
    margin-right: 50px;
}
.mb_10 {
    margin-bottom: 10px;
}
.mb_20 {
    margin-bottom: 20px;
}

.pt_42 {
    padding-top: 42px;
}
.pt_60 {
    padding-top: 60px;
}

.m_p_0 {
    margin: 0px ; 
    padding: 0px ;
}




.icon_mini {
    font-size: 10px;
}
.mini_menu i {
    cursor: pointer;
}
.mini_menu {
    position: absolute;
    top: 0;
    right: -30px;
    width: 25px;
    padding: 3px 4px;
    background: #f1f1f1;
    border-radius: 4px;
    z-index: 1;
}

.string { color: rgb(107, 107, 107); }
.number { color: rgb(32, 192, 17); }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

.message-main {
    position: absolute;
    bottom: 50px;
    right: -250px;
    background-color: #ffffff;
    border-radius: 7px;
    padding: 20px;
    font-size: 16px;
    width: 250px;
    border-left: 3px solid rgb(0, 255, 21);
    color: rgb(73, 73, 73);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}


.dark .string { color: rgb(218, 218, 218); }
.dark .number { color: rgb(32, 192, 17); }
.dark .boolean { color: blue; }
.dark .null { color: magenta; }
.dark .key { color: rgb(238, 60, 60); }

textarea {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;
}

#url_text {
    color: rgb(146, 146, 146);
}

.text-white{
    color: white !important;
}
.text-black{
    color: rgb(36, 36, 36) !important;
}
/* width */
/* width */
::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}



#save_data_rec .box:first-child{
    margin-left: 0px;
}


#m_check{
    color: #ccc !important;
}

.ui.mini.images .ui.image.circular{
    margin: 0px 2px;
    padding: 0px;
}


.mini_btn {
    padding: 0 6px;
    border-radius: 3px;
    cursor: pointer;
    color: #797979;
}
.mini_btn:hover {
    background-color: #d4d4f5;
    color: #2662e3;
}


/* Subtitle maker */
#grid_line{
    position: absolute;
    background: none;
    margin-top: 24px;
    border: none;
    padding-left: 23px;
    z-index: 1;
    color: #000000;
    overflow: hidden;
    resize: none;
}


#btn_plus, #btn_minus{
    cursor: pointer;
}

#timer, #lyric {
    background-color: #fffffff5;
}
@media screen and (max-width: 768px) {
    #grid_line {
        display: none;
    }
    #duration_field {
        width: 100% !important;
    }

    .download_file_ext {
        display: none;
    }
}



#theme {
    background: rgb(247 249 255);
}

#code_pre, #code_pre2 {
  min-height: 300px;
}

.my_container {
    margin: 20px;
}

.my_navbar {
    font-family: 'Inter', serif !important;
    padding: 3px 20px;
    margin: 0;
}

.my_navbar .item {
    font-weight: bold !important;
}

.ui.secondary.inverted.menu .active.item {
    border-radius: 5px !important;
}
.text-center {
    text-align: center;
}

.no-data {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    color: #b4b4b4;
}

iframe {
    width: 100%;
    height: calc(100vh - 45px);
}


#setting_side_bar .btn_theme_color:hover, 
#setting_side_bar .btn-bg-img:hover {
    background-color: #ffffff1f;
    cursor: pointer;
}

#setting_side_bar .btn_theme_color, 
#setting_side_bar .btn-bg-img, 
#setting_side_bar .btn-bg-img-none,
#setting_side_bar .btn-bg-img-your {
   color: #929292;
}

.btn-bg-img-none>div, .btn-bg-img-your>div {
    border: 1px solid rgb(37, 37, 37);
    border-radius: 7px;
    background-color: #181818;
    text-align: left;
    padding: 20px;
}
.btn-bg-img-none>div:hover, .btn-bg-img-your>div:hover {
    background-color: #282828;
    cursor: pointer;
}

#theme {
    width: 100vw;
    height: 100vh;
    overflow: auto;
}


.jsonStyleForm {
    display: flex;
    justify-content: space-between;
}

.jsonStyleForm label {
    color: #ccc;
    font-size: 12px;
}
.display-none {
    display: none !important;
}