html, body {
    display: block;
    /*background: #75ccd1;*/ /*#616161*/
    width: 100%;
    height: 100%;
    margin: 0;
    /*margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;*/
    padding: 0;
    /*padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;*/
    overflow: hidden;
    /*font-family: 'Nanum_SquareR', Geneva, Arial, Helvetica, sans-serif;*/
    font-family: "'Segoe UI', 'Noto Sans KR', sans-serif, 'Nanum_SquareR', 'Nanum Gothic', Helvetica, Arial"; /* CASS_2021! */
    /*font-family: "lucida sans", verdana, arial, helvetica, sans-serif;*/
    font-size: 100%;
    /**font-size:  80%;*/
    /* Uncomment this to enable scrolling and zooming
    touch-action: manipulation;
    */
}

table {
    font-size: 0.94em; /* CASS_FONT_20200119 // 0.91em; */ /* 1em; // CASS_20191114 */
}

/* // CASS_20191114 */
td, th {
    padding-top: 4px;
    padding-bottom: 4px;
}

/*.ui-draggable, .ui-droppable {
	background-position: top;
}*/

.ui-widget-content {
    background-position: top;
}

/*.ui-widget-header {*/
/*position:absolute;
    border:none;
    margin:0;
    padding-left:0px;
    padding-top:0px;
    top:0px;
    left:0px;
    width:650px;
    height:24px;
    background-color:steelblue;
    font-family:Consolas;
    color:white;
    text-align: left;
    text-indent: 10px;*/
/*letter-spacing: 3px;*/
/*line-height: 0.8;*/
/*word-spacing: -5px;*/
/*text-shadow: 3px 2px red;*/
/*}*/

/*#container {
    min-height: 100%;
    background-color: #DDD;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
    width: 676px;
    margin: 0 auto;
}*/

/** html #container {
    height: 100%;
}*/

/*form {
    height: 100%;
}*/

#form1 {
    width: 100%;
    height: 100%;
    margin: 0;
    /*margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;*/
    padding: 0;
    /*padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;*/
    overflow: hidden;
}
/* swalPolyade_classroom_block - 폴리곤에이드 클래스룸 팝업 */
.swalPolyade_classroom_block {
    font-family: 'Noto Sans KR' !important;
}

    .swalPolyade_classroom_block .swal2-header .swal2-icon {
        border-color: transparent;
        color: transparent;
        width: 7em;
        height: 7em;
        border-radius: 0% !important;
        border: .45em solid transparent;
        background-image: url('../../../Content/images/classroom/polyade/sirenKronee.png');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 1.25em auto 0.175em;
    }

    .swalPolyade_classroom_block .swal2-header .swal2-title {
        font-size: 1.575em;
        max-width: 84%;
    }

    .swalPolyade_classroom_block .swal2-header .swal2-close {
        top: 4px;
        right: 2px;
        width: 1em;
        height: 1em;
        font-size: 1.8em;
    }

    .swalPolyade_classroom_block .swal2-content .swal2-input {
        width: 90%;
    }

    .swalPolyade_classroom_block .swal2-actions .swal2-confirm {
        background-color: #153a59 !important;
    }

    .swalPolyade_classroom_block .swal2-actions .swal2-cancel {
        background-color: #dfdfdf !important;
        color: #153a59;
    }

    .swalPolyade_classroom_block .swal2-actions .swal2-styled {
        padding: .625em 5.15em;
    }

.swalPolyade_classroom_chat {
    font-family: 'Noto Sans KR' !important;
}

    .swalPolyade_classroom_chat .swal2-header .swal2-title {
        font-size: 1.575em;
        max-width: 84%;
    }

    .swalPolyade_classroom_chat .swal2-content .swal2-input {
        width: 90%;
    }

    .swalPolyade_classroom_chat .swal2-actions .swal2-confirm {
        background-color: #153a59 !important;
    }

    .swalPolyade_classroom_chat .swal2-actions .swal2-cancel {
        background-color: #dfdfdf !important;
        color: #153a59;
    }

.swalPolyade_classroom_block_save {
    width: 42em;
}

    .swalPolyade_classroom_block_save .swal2-header .swal2-close {
        top: 4px;
        right: 2px;
        width: 1em;
        height: 1em;
        font-size: 1.8em;
    }

.swalPolyade_classroom_block_get {
    /*width: 42em;*/
}

    .swalPolyade_classroom_block_get .swal2-header .swal2-close {
        top: 4px;
        right: 2px;
        width: 1em;
        height: 1em;
        font-size: 1.8em;
    }

/* 클래스룸 공유하기 팝업 */
.swalPolyade_classroom_block_share {
    overflow: hidden;
    padding: 1.25em 0 0 0 !important;
}

    .swalPolyade_classroom_block_share .swal2-close {
        font-size: 1.8em;
    }

    .swalPolyade_classroom_block_share form {
        padding: 0 1.25em 1.25em 1.25em;
    }

        .swalPolyade_classroom_block_share form > div {
            padding-left: 15px;
        }

        .swalPolyade_classroom_block_share form > * {
            text-align: left;
        }

    .swalPolyade_classroom_block_share .classroom_sharePop_title h4 {
        font-size: 27px;
        font-weight: bold;
        display: inline-block;
    }

    .swalPolyade_classroom_block_share .classroom_sharePop_title span {
        font-size: 13px;
        color: #666;
        vertical-align: text-bottom;
        padding-left: 9px;
    }

    .swalPolyade_classroom_block_share .classroom_sharePop_content {
        padding-top: 20px;
    }

        .swalPolyade_classroom_block_share .classroom_sharePop_content div {
            padding-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .swalPolyade_classroom_block_share .classroom_sharePop_content .classroom_sharePop_radio > span {
            font-weight: bold;
        }

        .swalPolyade_classroom_block_share .classroom_sharePop_content #id_classroom_sharePop_input {
            width: calc(100% - 6rem);
            resize: none;
            padding: 0.8em 1.2em;
            border: 1px solid #ddd;
            border-radius: 4px;
            line-height: 20px;
            font-size: 14px;
        }

.sharePop_subTitle {
    width: 77px;
}

.classroom_sharePop_label {
    padding-right: 20px;
    font-size: 15px;
}

.classroom_sharePop_radio label span {
    margin-left: -16px;
}

.classroom_sharePop_Btn {
    border: none;
    outline: none;
    /*background-color: #212121;*/
    background-color: rgb(21, 58, 89);
    color: #fff;
    width: 100%;
    height: 50px;
    cursor: pointer;
}

input[type='radio'], input[type='checkbox'] {
    position: relative;
    /*    width: 13px;
    height: 13px;*/
}

.classroom_radio_custom {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: -19px;
    top: 14px;
    transform: translateY(-50%);
    transition: background-color 0.3s;
    /*    border: 1px solid #4c4c4c;
    background-color: #fff;*/
}

input[type='radio']:checked ~ .classroom_radio_custom {
    /*background-color:#212121;*/
    background-color: #3d4652ff;
}

.classroom_radio_custom::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42%;
    height: 42%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 50%;
}

.classroom_sharePop_chkBox {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    left: -19px;
    top: 11px;
    transform: translateY(-50%);
    transition: background-color 0.3s;
}
    /*    .classroom_sharePop_chkBox > input[type='checkbox'] {
        position: relative;
        width: 13px;
        height: 13px;
        bordeR: 1px solid #4c4c4c;
        border-radius: 2px;
    }*/
    .classroom_sharePop_chkBox:before {
        content: '';
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 10px;
        border-right: 2px solid;
        border-bottom: 2px solid;
        transform: translate(-50%,-60%) rotate( 45deg);
        color: #fff;
        transition: opacity 0.3s;
    }

input[type='checkbox']:checked ~ .classroom_sharePop_chkBox {
    /*background-color: #212121;*/
    background-color: #3d4652ff;
}

    input[type='checkbox']:checked ~ .classroom_sharePop_chkBox:before {
        display: block;
    }

.classroom_sharePop_radio .pl_rev_radio_txt {
    vertical-align: -webkit-baseline-middle;
}

.classroom_sharePop_radio .classroom_sharePop_chk {
    padding-right: 3px;
}

    .classroom_sharePop_radio .classroom_sharePop_chk span {
        font-size: 15px;
    }

.swalPolyade_classroom_block_share input {
    appearance: auto !important;
}


#id_class_management_button_go_to_management:hover {
    color: #52e3fd;
}

#id_class_management_button_machine_learning:hover {
    color: #52e3fd;
}

/*https://www.w3docs.com/snippets/css/how-to-align-placeholder-text-of-input-field-in-html.html*/
.cls_class_management_buttons_object_quaternion {
    width: 62px;
    height: 19px;
    margin-top: 0px;
    /*text-align: right;*/
    text-align: center;
    /*border-radius: 10px;*/
    border-radius: 0px;
    border: 1px solid #dddddd;
    margin-left: 5px;
    padding-left: 11px;
}

@media (min-width: 915px) {

    .cls_south_none_object_position {
        display: inline-block;
        position: absolute;
        top: 9px;
        width: 260px;
        left: calc(50% - 121px);
        font-family: sans-serif;
        /*background: #d68a8a;*/
    }
}

@media (max-width: 914px) {

    .cls_south_none_object_position {
        display: inline-block;
        position: absolute;
        top: 9px;
        width: 254px;
        right: 327px;
        font-family: sans-serif;
        /*background: #d68a8a;*/
    }
}

@media (max-width: 734px) {

    #south_left > #text_div {
        display: none;
    }
}

/*https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element
https://codepen.io/sosuke/pen/Pjoqqp
https://developer.mozilla.org/en-US/docs/Web/CSS/filter#browser_compatibility*/

/*https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css*/
/*https://www.w3docs.com/snippets/css/how-to-change-the-color-of-png-image-using-css.html*/
.cls_south_none_object_position img#id_south_none_apply_object_position_value_modified {
    cursor: pointer;
    margin-top: 0px;
    /*width: 25px;
    height: 17px;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(214deg) brightness(120%) contrast(113%);*/
    /*filter: invert(78%) sepia(66%) saturate(679%) hue-rotate(157deg) brightness(98%) contrast(103%);*/
    /*filter: invert(65%) sepia(94%) saturate(512%) hue-rotate(163deg) brightness(109%) contrast(98%);*/
    margin-top: -1px;
    margin-right: 3px;
    width: 22px;
    height: 22px;
}

.cls_south_none_object_position img#id_south_none_apply_object_rotation_value_modified {
    cursor: pointer;
    margin-top: 0px;
    margin-top: -1px;
    margin-right: 5px;
    width: 20px;
    height: 19px;
}

.cls_south_none_object_position img#id_south_none_apply_object_scale_value_modified {
    cursor: pointer;
    margin-top: 0px;
    margin-top: -1px;
    margin-right: 5px;
    width: 20px px;
    height: 20px;
}

    .cls_south_none_object_position img:hover {
        /*filter: invert(60%) sepia(45%) saturate(7130%) hue-rotate(163deg) brightness(97%) contrast(101%);*/
        /*filter: invert(78%) sepia(66%) saturate(679%) hue-rotate(157deg) brightness(98%) contrast(103%);*/
        filter: invert(65%) sepia(94%) saturate(300%) hue-rotate(163deg) brightness(180%) contrast(98%);
        /*height: 18px;*/
    }

.cls_south_none_object_quaternion_text_x {
    color: white !important;
    border: 1px solid #524ff9;
    background: #524ff9;
    font-size: 8px;
    position: absolute;
    border-radius: 50%;
    width: 13px;
    left: 31px;
    padding-left: 3px;
    top: 1px;
}

.cls_south_none_object_quaternion_text_x2 {
    color: white !important;
    /*border: 1px solid #999999;*/
    background: #575f68;
    font-size: 12px;
    position: absolute;
    /*border-radius: 10px 0px 0px 10px;*/
    border-radius: 0px 0px 0px 0px;
    width: 14px;
    height: 20px;
    left: 36px;
    padding-left: 3px;
    padding-top: 2px;
    /*margin-top: 3px;*/
    bottom: 0px;
}

.cls_south_none_object_quaternion_text_y {
    color: white !important;
    border: 1px solid #f44c50;
    background: #f44c50;
    font-size: 8px;
    position: absolute;
    border-radius: 50%;
    width: 13px;
    left: 75px;
    padding-left: 3px;
    top: 1px;
}

.cls_south_none_object_quaternion_text_y2 {
    color: white !important;
    /*border: 1px solid #999999;*/
    background: #575f68;
    font-size: 12px;
    position: absolute;
    /*border-radius: 10px 0px 0px 10px;*/
    border-radius: 0px 0px 0px 0px;
    width: 14px;
    height: 20px;
    left: 106px;
    padding-left: 3px;
    padding-top: 2px;
    /*margin-top: 3px;*/
    bottom: 0px;
}

.cls_south_none_object_quaternion_text_z {
    color: white !important;
    border: 1px solid #70ff60;
    background: #70ff60;
    font-size: 8px;
    position: absolute;
    border-radius: 50%;
    width: 13px;
    left: 119px;
    padding-left: 3px;
    top: 1px;
}

.cls_south_none_object_quaternion_text_z2 {
    color: white !important;
    /*border: 1px solid #999999;*/
    background: #575f68;
    font-size: 12px;
    position: absolute;
    /*border-radius: 10px 0px 0px 10px;*/
    border-radius: 0px 0px 0px 0px;
    width: 14px;
    height: 20px;
    left: 177px;
    padding-left: 3px;
    padding-top: 2px;
    /*margin-top: 3px;*/
    bottom: 0px;
}