body {
    background-color: #000;
    margin: 0;
    font-size: 14px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* canvas {
    transform:scale3d()
} */

.select_row {
    background-color: #D6F2FF;
}

.select_but_tab.select {
    border: 1px solid #717171a5 !important;
    background-color: #2962ff !important;
    font-size: large;
    display: flex;
    align-items: center;
    /* width: 20px;  */
    height: 23px;
    color: #FFFFFF;
    font-family: 'Open Sans';
    font-size: 12px;
    justify-content: center;
    font-weight: 700
}

.select_but_tab {
    border: 1px solid #717171a5 !important;
    background-color: #161a1e !important;
    font-size: large;
    display: flex;
    align-items: center;
    /* width: 20px;  */
    height: 23px;
    color: #FFFFFF;
    font-family: 'Open Sans';
    font-size: 12px;
    justify-content: center;
    font-weight: 700
}

.select_temp {
    background: url(../img/filter_temp2.png) no-repeat left;
    font-size: 14px;
    background-size: 17px 17px;
    width: 100%;
    text-align: -webkit-center;
    margin: 0px 17px 0px 17px;
    height: 30px;
    display: inline-block;
    background-color: transparent;
    color: #8E95A2;
    outline: none;
    border-style: none;
    font-family: 'Anuphan', sans-serif;
    text-indent: 25px;
}

.select-selected {
  background-color: white;
}

button:hover, button:focus {
    outline: none !important;
    border: none !important;
}

/* Search Sym Desktop */
.set_filter,.set_filter:hover{
    color: #181818 !important; 
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.set_filter.active,.set_filter.active:hover {
    background-color: #00A19A;
    color: #fff !important;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    
}

.round_filter {
    /* background-color: rgba(0, 161, 154, 0.08); */
    border-radius: 8px !important;

}

.round_filter.active {
    background-color: #00A19A;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    
}

/* End Search Sym Desktop */

/* Search Sym Mobile */
.set_filter_mobile{
    color: #181818;
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 10px;
    text-decoration: none;
}

.set_filter_mobile.active {
    background-color: #00A19A;
    color: #fff;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    
}

.round_filter_mobile {
    /* background-color: rgba(0, 161, 154, 0.08); */
    border-radius: 8px !important;

}

.round_filter_mobile.active {
    background-color: #00A19A;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
    padding: 5px 30px 5px 30px;
}


/* End Search Sym Mobile */

/* Add Indicator Desktop */
.addindy {
    /* background-color: rgba(0, 161, 154, 0.08); */
    border-radius: 8px !important;
    text-align: left;

}

    .addindy.active {
        color: #EAECEF;
        background-color: #D6F2FF;
        font-family: "Open Sans";
        font-weight: bold;
        font-size: 14px;
        text-align: left;
    }

.indy_filter {
    /* color: #9CA3AF; */
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 14px;
}

.indy_filter.active {
    color: #007DFE;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    
}
/* End Add Indicator Desktop */


/* Start Add Indicator Mobile */
#addIndicators_mobile{
    padding: 20px !important;
}

#addIndicators_smallSize{
    padding: 50px !important;
}

.indy_filter_mobile{
    color: #181818;
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 10px;
}

.indy_filter_mobile.active {
    background-color: #00A19A;
    color: #fff;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    
}

.indy_filter_smallSize{
    color: #181818;
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 10px;
}

.indy_filter_smallSize.active {
    background-color: #00A19A;
    color: #fff;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    
}

.addindy_mobile {
    /* background-color: rgba(0, 161, 154, 0.08); */
    border-radius: 8px !important;
    text-align: left;

}

.addindy_mobile.active {
    background-color: #00A19A;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
}

.addindy_smallSize {
    /* background-color: rgba(0, 161, 154, 0.08); */
    border-radius: 8px !important;
    text-align: left;

}

.addindy_smallSize.active {
    background-color: #00A19A;
    /* background-color: rgba(0, 161, 154, 0.08); */
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 10px;
}

#indy_mobile{
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 500;
    color: #181818;
    }

#indy_smallSize{
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 500;
    color: #181818;
    }    

/* End Add Indicator Mobile */

.indys {
    margin:24px 0px 24px 0px;
    font-weight: 500;
    font-size:14px; 
    font-family:'Open Sans';
    text-align: left;
    color: #181818;
}



#scxIndicators_inp_search {
    float: left;
    width: 100%;
    height: 35px;
    text-align: left;
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
  }

#scxIndicators_inp_search:focus {
    outline: none !important;
    /*border:1px solid #00A19A; */   
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    /* box-shadow: 0 0 10px #719ECE; */
  }

  #scxIndicators_inp_search_mobile {
    float: left;
    width: 100%;
    height: 35px;
    text-align: left;
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
  }

#scxIndicators_inp_search_mobile:focus {
    outline: none !important;
    border:1px solid #00A19A;
    border-radius: 8px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    /* box-shadow: 0 0 10px #719ECE; */
  }

  #scxIndicators_inp_search_smallSize {
    float: left;
    width: 100%;
    height: 35px;
    text-align: left;
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
  }

#scxIndicators_inp_search_smallSize:focus {
    outline: none !important;
    border:1px solid #00A19A;
    border-radius: 8px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    /* box-shadow: 0 0 10px #719ECE; */
  }

#searchSymbol {
    float: left;
    width: 100%;
    height: 35px;
    text-align: left;
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
  }

#searchSymbol:focus {
    outline: none !important;
    border:1px solid #00A19A;
    border-radius: 8px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    /* box-shadow: 0 0 10px #719ECE; */
  }
  #searchSymbol_mobile {
    float: left;
    width: 100%;
    height: 35px;
    text-align: left;
    border: 0.25px solid rgba(165, 165, 165, 0.2);
    border-radius: 8px;
  }

#searchSymbol_mobile:focus {
    outline: none !important;
    border:1px solid #00A19A;
    border-radius: 8px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 14px;
    /* box-shadow: 0 0 10px #719ECE; */
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  /* Rounded sliders */
.slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 21px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  

  
  input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }

.icon {
    padding-left: 40px;
    background: url("../img/search_temp.png") no-repeat 15px;
    background-size: 20px;
}

/* @media screen and (max-width: 600px) {
.modal_custom{
    max-width: 350px; 
    border-radius: 13px;
    height: 90%;
    left: 13px;
}

  } */

      @media screen and (max-width: 601px) {
        #mobile_layout{
            margin: 0px 10px 0px 10px;
        }
        #deletetemp_style{
            margin: 0px 10px 0px 10px;
        }
        #addtemp_style{
            margin: 0px 10px 0px 10px;
        }
    }

.modal_custom {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    /* border: 1px solid rgba(0,0,0,.2); */
    border-radius: 0.3rem;
    outline: 0;
}

.row_custom_Temp {
    display: flex;
}

.row_custom {
    display: flex;
    flex-wrap: wrap;
}

#row_custom_search {
    display: flex;
    flex-wrap: wrap;
}

.highlight_row {
    background-color: rgba(0, 161, 154, 0.5);
}

.img_sym{
    border-radius: 50%;
    /* border: 0.5px solid #A5A5A5; */
    background-color:rgba(24, 24, 24, 0.08)
}

.hover_select:hover {
  background-color: #D6F2FF;
  color: #ffffff ;
}

.hover_select_indy:hover {
    color: #FFFFFF ;
    font-weight: bold;
    background-color: #D6F2FF;
}

#hover_select:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  

.modal_in_custom {
    top: 10%;
    transform: translate(-50%, -50%);
}

.modal_in_custom_delete {
    top: 30%;
    transform: translate(-50%, -50%);
}

.col_custom {
    position: relative;
    width: 100%;
    padding-right: 15px;
    margin-left: 30px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll_hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll_hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

#show_scroll_indicators{
    /* max-height: calc(100vh - 360px) */
    max-height: 380px;
}

.show_scroll::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
.show_scroll::-webkit-scrollbar {
    width: 10px;
  }

  .show_scroll_mobile::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
.show_scroll_mobile::-webkit-scrollbar {
    width: 5px;
  }

/* Hide scrollbar for Chrome, Safari and Opera */
.child-div::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.child-div {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

body.scxThemeLight {
    background-color: #FFF;
}


.scxThemeLight {
    background-color: #FFF;
}


#more_indy.scxThemeLight {
    color: #000;
}


#more_indy.scxThemeDark {
    color: #FFF;
}

#more_indy > .scxIndicatorItem:hover {
    background-color: #0D539B;
    cursor: pointer
}

.modal_custom.scxThemeDark .show_scroll .hover_select:hover {
    background-color: #0D539B;
    cursor: pointer;
}


.scxThemeDark .scxIndicators_search {
    color: #fff;
}

#more_indy.scxThemeLight > .scxIndicatorItem:hover {
    background-color: #EDFAFF;
    cursor: pointer;
    color: #000;
}


.scxThemeLight .scxIndicators_search {
    color: #000;
}


.modal_custom.scxThemeLight .show_scroll .hover_select:hover {
    background-color: #EDFAFF;
    cursor: pointer;
    color: #000;
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindText {
    background-image: url(../img/Text_TypeUnActive.png);
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindText.active {
    background-image: url(../img/Text_TypeActive1.png);
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindImage.active {
    background-image: url(../img/Image_TypeActive1.png);
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindImage {
    background-image: url(../img/Image_TypeUnactive.png);
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindHTML {
    background-image: url(../img/Command_TypeUnactive.png);
}

.scxThemeLight .scxButtonGroup > label.scxDrawingDialog_label_tooltipKindHTML.active {
    background-image: url(../img/Command_TypeActive1.png);
}

.scxThemeDark {
    background-color: #111B25;
}

body.scxThemeBeet {
    background-color: #683857;
}

body.scxThemeCyan {
    background-color: #688896;
}

body.scxThemeGray {
    background-color: #595959;
}

body.scxThemeOlive {
    background-color: #678e4c;
}

body.scxThemeOrange {
    background-color: #ae5649;
}

body.scxThemePurple {
    background-color: #856899;
}

body.scxThemeSky {
    background-color: #3d85a5;
}

body.scxThemeTeal {
    background-color: #4d8985;
}

body.scxThemeDark {
    background-color: #111B25;
}


button:hover, button:focus {
    outline: none!important;
    border: none !important;
}


#chartContainer {
    display: inline-block;
    text-align: center;
    height: 80%;
    width: 80%;
}

.underbar {
    height: 38px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    z-index: 10;
    left: 40px;
    width: 95%;
    border-left: solid 5px rgb(42, 46, 57);
}

.control_set{
    text-align: left;
    margin-left: 5px;
    height: 38px;
    display: inline-block;
    float: right;
    /* padding: 8px; */
}

#timezone-dropdown{
    border: none;
    outline: none;
}

#timezone-dropdown:hover {
    background-color: rgba(0, 161, 154, 0.08);
  }

#timezone-dropdown :focus{
    border: none;
    outline: none;
    background-color: rgba(0, 161, 154, 1);
}

.period_range{
    text-align: left;
    margin-left: 5px;
    height: 38px;
    display: inline-block;
    float: left;
    padding: 8px;
}


.period_under{
    text-align: center;
    padding: 8px 4px 8px 4px;
    font-family: "Open Sans";
}

.right_menu{
    text-align: center;
    
    font-family: "Open Sans";
}
#sub_menu{
    padding: 8px 4px 8px 4px;
}

.scxContainer {
    margin-left: 40px;
    margin-right: auto;
    margin-top: 35px;
    height: 80%;
    width: 80%;
    /* height: 500px !important; */
}

.scxContainer.Layout {
    margin-left: 40px;
    margin-right: auto;
    margin-top: 0px !important;
    height: 80%;
    width: 80%;
    /* height: 500px !important; */
}

.buttonMenuBar {
    top: 89%;
    opacity:0.6;
    background-color: rgba(0, 125, 254, 1);
    width: 15px;
    height: 45px;
    z-index: 999;
    position: absolute;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    color: white;
    padding-top: 12px;
    cursor: pointer;
}

.buttonMenuBar:hover, .buttonMenuBar:focus, .buttonMenuBar:active {
    opacity:1;
}

#footer {
    text-align: center;
    padding-top: 30px;
    min-width: 768px;
    width: 100%;
    display: inline-block;
}

.logInDialog {
    text-align: center;
    padding-top: 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;
}

#scxLogInError{
    color: red;
}

.dataFeedDialog {
    width: 400px;
    text-align: center;
    padding-top: 30px;
    margin-right: auto;
    margin-left: auto;
    display: none;
}

#chartContainer.scxFullWindow + #footer {
    display: none;
}

#chartContainer.scxFullWindow + #recreationBtnContainer {
    display: none;
}

#footer .logo {
    height: 138px;
    width: 458px;
    display: inline-block;
    background: transparent url("../img/scx-logo-light.png") center no-repeat;
}

body.scxThemeLight #footer .logo {
    background-image: url("../img/scx-logo-light.png");
}

body.scxThemeCyan #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemeBeet #footer .logo {
    background-image: url("../img/scx-logo-light.png");
}

body.scxThemeGray #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemeOlive #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemeOrange #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemePurple #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemeSky #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

body.scxThemeTeal #footer .logo {
    background-image: url("../img/scx-logo-dark.png");
}

.copyright {
    color: darkgrey;
    font-size: 10px;
}

.modal-header{
    padding: 30px 0px 30px 0px;
}

.scxRightValueScale {
    background-color: transparent !important;
}
.sp-palette.sp-thumb.sp-cf {
    /* display: flex; */
}

@media (min-width:1px) {
    #alert_desktop{
        display: block;
    }
    #alert_mobile{
        display: none;
    }
}

@media (min-width:768px) {
    #alert_desktop{
        display: block;
    }
    #alert_mobile{
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .modal_custom{
        width: 500px; 
        border-radius: 13px;
        height:auto !important
    }
    .modal-header{
        padding: 15px 0px 10px 0px;
    }
    .show_scroll{
        /* max-height: calc(100vh - 20vh) !important */
        /* height: 25rem !important */
    }
    .modal_in_custom{
        display: flex;
        justify-content: center;
    }
    .indicator_list{
        margin-bottom:30px !important
    }
    /* #show_scroll_indicators {
        max-height: calc(100vh - 300px) !important
    } */

    #scxDrawingDialog .modal-dialog {
        max-width: 500px !important;
        width: max-content;
        place-content: center !important;
        display: flex !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
  }

  @media screen and (max-height: 800px) {

    .modal_custom{
        /* width: 500px; 
        border-radius: 13px;
        height:auto !important */
    }
    .modal-header{
        padding: 15px 0px 10px 0px;
    }
    /* .show_scroll{
        height: 25rem !important
    } */
    .modal_in_custom{
        display: flex;
        justify-content: center;
    }
    .indicator_list{
        margin-bottom:30px !important
    }
    /* #show_scroll_indicators {
        max-height: calc(100vh - 300px) !important
    } */

    .modal-dialog.modal-lg.modal-dialog-centered.modal_in_custom {
       height: 100% !important; 
       max-height: none !important;
    }
    
    .scroll_hide {
        max-height: 500px !important;
    }
  }


  @media screen and (max-height: 700px) {

    .buttonMenuBar {
        top: 85%;
        width: 15px;
        height: 45px;
        z-index: 999;
        position: absolute;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        font-size: 12px;
        font-weight: 900;
        color: white;
        padding-top: 12px;
        cursor: pointer;
    }

    .modal_custom{
        height: 100%;
    }
    .modal-header{
        padding: 15px 0px 10px 0px;
    }
    .modal-dialog {
        margin: 0px auto;
    }
    .modal_in_custom{
        display: flex;
        justify-content: center;
    }
    .indicator_list{
        margin-bottom:30px !important
    }
    #type_indicators.show_scroll {
        max-height: calc(100vh - 200px) !important
    }
    /* #show_scroll_indicators { */
        /* max-height: calc(100vh - 200px) !important */
        /* max-height: calc(100vh - 250px) !important; */
    /* } */
    #addIndicators {
        padding: 0px !important
    }

    .scroll_hide {
        max-height: 300px !important;
    }
  }

  @media screen and (max-height: 550px) {
    #show_scroll_indicators {
        max-height: calc(100vh - 220px) !important;
    }
  }

@media screen and (max-height: 500px) {

    .buttonMenuBar {
        top: 82%;
        width: 15px;
        height: 45px;
        z-index: 999;
        position: absolute;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        font-size: 12px;
        font-weight: 900;
        color: white;
        padding-top: 12px;
        cursor: pointer;
    }
}

@media screen and (max-height: 420px) {

    .buttonMenuBar {
        top: 79%;
        width: 15px;
        height: 45px;
        z-index: 999;
        position: absolute;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        font-size: 12px;
        font-weight: 900;
        color: white;
        padding-top: 12px;
        cursor: pointer;
    }
    .modal_custom {
        height: 100% !important;
    }
    .modal.in .modal-dialog { 
        margin-top: 0px !important;
    }
}

/* @media screen and (max-height: 420px) { 

} */

@media screen and (max-height: 330px) {

    .buttonMenuBar {
        top: 74%;
        width: 15px;
        height: 45px;
        z-index: 999;
        position: absolute;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        font-size: 12px;
        font-weight: 900;
        color: white;
        padding-top: 12px;
        cursor: pointer;
    }
}

    @media screen and (max-height: 550px) {
        .scxDialog .modal-dialog .modal-content .modal-body {
            min-height: 20px !important;
            height: 220px !important;
        }
    }

    @media screen and (max-height: 404px) {
        .scxDialog .modal-dialog .modal-content .modal-body {
            min-height: 20px !important;
            height: 95px !important;
        }
        .modal_in_custom {
            top: 0% !important
        }
    }
    
    @media screen and (max-height: 300px) {

        .buttonMenuBar {
            top: 70%;
            width: 15px;
            height: 45px;
            z-index: 999;
            position: absolute;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            font-size: 12px;
            font-weight: 900;
            color: white;
            padding-top: 12px;
            cursor: pointer;
        }

        #scxDrawingDialog .modal-dialog .modal-content .modal-body {
            height: 20px !important;
        }

        .modal-dialog {
            top: 10px !important;
        }

        .modal-footer {
            padding-bottom: 5px !important;
        }

        .btn-save {
            height: auto !important;
        }

        .btn-apply {
            height: auto !important;
        }

        .modal-footer-top {
            margin-bottom: 0px !important;
        }
    }


    @media screen and (max-width: 800px) {
        .tpname {
            width: auto !important;
            padding-left: 20px;
        }
    
        .tptext {
            padding-left: 0px !important;
        }

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

        .input-group {
            width: max-content;
        }

        .select_temp {
            margin: 0px 5px 0px 5px;
        }
        #bgdiv {
            padding-left: 0px !important;
        }

        .modal-dialog.modal-lg.modal-dialog-centered.modal_in_custom {
            /* height: 100% !important;  */
            max-height: none !important;
         }

         #seachTemp {
            border: 1px solid rgba(165, 165, 165, 0.2) !important;
         }
    }

    @media screen and (max-width: 600px) {
        .tpname {
            width: auto !important;
        }
    
        .tptext {
            padding-left: 0px !important;
        }

        .row_custom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .input-group {
            width: max-content;
        }

        .select_temp {
            margin: 0px 5px 0px 5px;
        }
        #bgdiv {
            padding-left: 0px !important;
        }

        .hover_select {
            display: flex;
            flex: auto;
            width: auto !important;
            align-items: center;
            word-wrap: break-word;
            word-break: break-word;
        }

        
    .scxDialog .modal-dialog .modal-content .modal-header > :not(a) {
        /* width: 100%; */
        padding-left: 0px !important;
        padding-right: 0px !important;
        font-size: larger;
    }

    .modal-header.ui-draggable-handle {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

        .scxDrawingDialog-footer{
            padding-right: 1.2em !important;
        }

        .modal_custom {
            width: -webkit-fill-available;
        }

        #alert_desktop{
            padding: 15px;
            display: flex;
            justify-content: space-around;
        }
    }

    @media screen and (max-width: 450px) {
        #scxDrawingDialog .modal-dialog {
            width: 310px !important;
            /* width: max-content; */
            place-content: center !important;
            display: flex !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        #scxDrawingDialog .scxDrawingDialog-body #scxDrawingDialog_input_textSize + .bootstrap-select {
            width: 100% !important;
            margin-top: 5px !important;
        }

        .scxDialog .scxControls > * {
            margin-top: 5px !important;
        }
        .sp-palette-button-container.sp-cf{
            margin-top: 5px;
        }
        .sp-palette-container,
        .sp-picker-container {
            float: left;
            position: relative;
            padding: 3px;
            padding-bottom: 300px;
            margin-bottom: -290px
        }

        .show_scroll {
            padding-left: 0px !important;
            margin-right: 0px !important;
        }
        .modal-content {
            font-size: 10px !important;
        }
        .modal-footer {
                display: flex !important;
                padding-bottom: 24px;
                padding-right: 10px !important;
                justify-content: space-around;
        }

        .dropdown-menu {
             width: auto !important;
        }
    }

.pentagon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  }

  @media screen and (max-width: 600px) {
    .componentsEventDetail {
      max-width: 95vw;
      left: 2.5%;
      transform: none !important;
    }
  }

.scxPanelTitleCaption .delay{
    padding-left: 3px;
    padding-right: 3px;
  --tip-x: 4px;
  --tip-gap: 8px;  
  --tip-size: 10px;
  --tip-bg: #fff;
  --tip-fg: #111;
  --tip-border: none;
  --tip-shadow: 0 8px 20px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.10);
}

.scxPanelTitleCaption .delay:hover,
.scxPanelTitleCaption .delay:focus {
    background-color: rgba(244, 208, 145, 0.36);
}

.scxPanelTitleCaption .delay::after {
  content: attr(data-tooltip);
  position: absolute;
  left: var(--tip-x);
  font-weight: 600;
  top: calc(100% + var(--tip-gap));
  transform: translateY(-4px);
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border: 1px solid var(--tip-border);
  box-shadow: var(--tip-shadow);
  font-size: 12px;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 12;
}

.scxPanelTitleCaption .delay::before {
  content: "";
  position: absolute;
  left: calc(var(--tip-x) + 20px);
  top: calc(100% + var(--tip-gap) - (var(--tip-size) / 2) - 0.5px);
  width: var(--tip-size);
  height: var(--tip-size);
  background: var(--tip-bg);
  transform: rotate(45deg);
  border-left: 1px solid rgba(0,0,0,.15);
  border-top: 1px solid rgba(0,0,0,.15);
  box-shadow: none;
  border-radius: 1px;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 11; 
}

/* แสดงเมื่อ hover/focus */
.scxPanelTitleCaption .delay:hover::after,
.scxPanelTitleCaption .delay:focus::after {
  opacity: 1;
  transform: translateY(0);
}
.scxPanelTitleCaption .delay:hover::before,
.scxPanelTitleCaption .delay:focus::before {
  opacity: 1;
}