/*
=====================================================================
Text
=====================================================================
*/

.text_caption
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 10px 5px 10px;
    width: 150px;
}

.text_caption > div:nth-child(1)
{
    color: #787878;
}

.text_caption > div:nth-child(2)
{
    width: 100%;
    padding: 10px 0;
    font-size: 1.1rem;
}

/*
===================================================================== 
Textbox
=====================================================================
*/

input[type="text"].textbox, input[type="password"].textbox, input[type="number"].textbox, input[type="email"].textbox
{
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #B2B2B2 !important;
    color: #000000;
    padding: 6px 5px;
    border-radius: 2px;
    outline:none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-focus-ring-color: none;
    -webkit-font-smoothing: antialiased;
}

input[type="text"].textbox:disabled, input[type="password"].textbox:disabled, input[type="number"].textbox:disabled, input[type="email"].textbox:disabled
{
    background: #DEDEDE;
}

input[type="text"].textbox:read-only, input[type="password"].textbox:read-only, input[type="number"].textbox:read-only, input[type="email"].textbox:read-only
{
    background: #F2F2F2;
}

input[type="text"].textbox:focus, input[type="password"].textbox:focus, input[type="number"].textbox:focus, input[type="email"].textbox:focus
{
    border: 1px solid #FFA000 !important;
}

input[type="text"].selectbox
{
    width: 200px;
    height: 30px;
    background: #F2FFFF;
    border: 1px solid #B2B2B2 !important;
    color: #000000;
    padding: 6px 5px;
    border-radius: 2px;
    outline:none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-focus-ring-color: none;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}

input[type="text"].selectbox:focus, input[type="password"].selectbox:focus
{
    border: 1px solid #FFA000 !important;
}

input[type="text"].selectbox:disabled
{
    background: #F2F2F2 !important;
    cursor: default !important;
}

input[type="text"].selectbox:read-only
{
    background: #F2FFFF;
    cursor: pointer !important;
}

.textbox_caption
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 10px 5px 10px;
    width: 200px;
}

.textbox_caption > div:nth-child(1)
{
    color: #787878;
}

.textbox_caption > div:nth-child(2)
{
    width: 100%;
}

.textbox_caption > div:nth-child(2) input
{
    width: 100%;
    margin: 5px 0 0 0;
}

.text_side_with_textbox
{
    display: flex;
    flex-direction: row;
    margin: auto 5px 12px 5px;
}

.textbox_caption_btn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 5px 7px 10px;
    width: 300px;
}

.textbox_caption_btn > div:nth-child(1)
{
    color: #787878;
}

.textbox_caption_btn > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(1)
{
    width: 100%;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(1) input
{
    width: 100%;
    margin: 5px 0 0 0;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(2)
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    margin-left: 5px;
    flex-grow: 1;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(2) button
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline:none;
    appearance: none;
    border: 1px solid #C0C0C0;
    border-radius: 2px;
    padding: 6px 25px;
    color: #484848;
    background: #E8E8E8;
    text-decoration: none;
    cursor: pointer;
    white-space:nowrap;
    min-width: 80px;
    width: 100%;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(2) button:disabled
{
    background: #D0D0D0;
    color: #8A8A8A;
    cursor: default;
}

.textbox_caption_btn > div:nth-child(2) > div:nth-child(2) button:hover
{
    background: #D4D4D4;
}

.textbox_caption_img_btn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 5px 7px 10px;
    width: 300px;
}

.textbox_caption_img_btn > div:nth-child(1)
{
    color: #787878;
}

.textbox_caption_img_btn > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.textbox_caption_img_btn > div:nth-child(2) > div:nth-child(1)
{
    width: 100%;
}

.textbox_caption_img_btn > div:nth-child(2) > div:nth-child(1) input
{
    width: 100%;
    margin: 5px 0 0 0;
}

.textbox_caption_img_btn > div:nth-child(2) > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-top: 5px;
}

.textbox_caption_img_btn > div:nth-child(2) > div:nth-child(2) button
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline: none;
    appearance: none;
    border: none;
    background-color: transparent;
    text-decoration: none;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-right: 5px;
}

.textbox_err
{
    background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRjAwMDAiIGQ9Ik0xMSwxNWgydjJoLTJWMTUgTTExLDdoMnY2aC0yVjcgTTEyLDJDNi40NywyLDIsNi41LDIsMTJjMCw1LjUyMyw0LjQ3NywxMCwxMCwxMGM1LjUyMywwLDEwLTQuNDc3LDEwLTEwDQoJQzIyLDYuNDc3LDE3LjUyMywyLDEyLDIgTTEyLDIwYy00LjQxOCwwLTgtMy41ODItOC04YzAtNC40MTgsMy41ODItOCw4LThjNC40MTgsMCw4LDMuNTgyLDgsOEMyMCwxNi40MTgsMTYuNDE4LDIwLDEyLDIweiIvPg0KPC9zdmc+DQo=') !important;
    background-position: center right 5px !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
}

/*
===================================================================== 
Text Area
=====================================================================
*/

textarea.textarea
{
    border: 1px solid #B2B2B2;
    -webkit-appearance: none;
    -webkit-focus-ring-color: none;
    outline:none;
    border-radius: 2px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    overflow: auto;
}

textarea.textarea:disabled
{
    background-color: #DEDEDE;
}

textarea.textarea:read-only
{
    background-color: #F2F2F2;
}

textarea.textarea:-moz-read-only
{
    background-color: #F2F2F2;
}

textarea.textarea:focus
{
    border: 1px solid #FFA000 !important;
}


/*
===================================================================== 
Dropdown box
=====================================================================
*/

.dropdown_caption
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 10px 7px 10px;
    width: 200px;
}

.dropdown_caption > div:nth-child(1)
{
    color: #787878;
}

.dropdown_caption > div:nth-child(2)
{
    width: 100%;
}

.dropdown_caption > div:nth-child(2) select
{
    width: 100%;
    margin: 5px 0 0 0;
}

.dropdown_caption_btn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 5px 7px 10px;
    width: 250px;
}

.dropdown_caption_btn > div:nth-child(1)
{
    color: #787878;
}

.dropdown_caption_btn > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(1)
{
    width: 100%;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(1) select
{
    width: 100%;
    margin: 5px 0 0 0;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-left: 5px;
    margin-top: 5px;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(2) button
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline:none;
    appearance: none;
    border: 1px solid #C0C0C0;
    border-radius: 2px;
    padding: 6px 25px;
    color: #484848;
    background: #E8E8E8;
    text-decoration: none;
    cursor: pointer;
    white-space:nowrap;
    width: 100%;
    min-width: 80px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(2) button:disabled
{
    background: #D0D0D0;
    color: #8A8A8A;
    cursor: default;
}

.dropdown_caption_btn > div:nth-child(2) > div:nth-child(2) button:hover
{
    background: #D4D4D4;
}

.dropdown_caption_img_btn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 5px 5px 7px 10px;
    width: 250px;
}

.dropdown_caption_img_btn > div:nth-child(1)
{
    color: #787878;
}

.dropdown_caption_img_btn > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.dropdown_caption_img_btn > div:nth-child(2) > div:nth-child(1)
{
    width: 100%;
}

.dropdown_caption_img_btn > div:nth-child(2) > div:nth-child(1) select
{
    width: 100%;
    margin: 5px 0 0 0;
}

.dropdown_caption_img_btn > div:nth-child(2) > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-top: 5px;
}

.dropdown_caption_img_btn > div:nth-child(2) > div:nth-child(2) button
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline: none;
    appearance: none;
    border: none;
    background-color: transparent;
    text-decoration: none;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    cursor: pointer;
}

select.dropdown
{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 200px;
    padding: 6px 25px 6px 10px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3e%3cpath fill='%23989898' d='M8.41,9.84L13,14.42l4.59-4.58L19,11.25l-6,6l-6-6L8.41,9.84z'/%3e%3cpath fill='none' d='M0-0.75h24v24H0V-0.75z'/%3e%3c/svg%3e");
    background-position: center right;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
}

select.dropdown option
{
    color: #000000;
}

select.dropdown:disabled
{
    background-color: #F2F2F2;
    opacity: 1;
    color: #000000;
}

select.dropdown:focus
{
    border: 1px solid #FFA000 !important;
}

select.dropdown::-ms-expand
{
    display: none;
}

/*
===================================================================== 
CSS Checkbox
=====================================================================
*/

div.checkbox input[type=checkbox]
{
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}

div.checkbox label:nth-child(2)
{
    padding-left: 15px;
    height: 16px;
    display: inline-block;
    line-height: 16px;
    border: 1px solid #B2B2B2;
    background-repeat: no-repeat;
    background-position: 0 0;
    background: #FFFFFF;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

div.checkbox label:nth-child(3)
{
    margin-left: 5px;
    vertical-align: middle;
    font-size: 1rem;
    color: #000000;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

div.checkbox input[type=checkbox]:checked + label:nth-child(2)
{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='15px' height='15px' viewBox='0 0 15 15' enable-background='new 0 0 15 15' xml:space='preserve'%3e%3cpath fill='%23357EC7' stroke='%23357EC7' stroke-width='1.5' stroke-miterlimit='10' d='M11.5,5.08l-5.484,5.485L3.5,8.052l0.645-0.645 l1.871,1.865l4.84-4.838L11.5,5.08z'/%3e%3c/svg%3e");
}

div.checkbox input[type=checkbox]:disabled + label:nth-child(2)
{
    background-color : #F2F2F2;
}

/*
===================================================================== 
CSS Button
=====================================================================
*/

button.btn
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline:none;
    appearance: none;
    border: 1px solid #C0C0C0;
    border-radius: 2px;
    padding: 8px;
    color: #484848;
    background: #E8E8E8;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

button.btn:hover:enabled
{
    background: #D4D4D4;
}

button.btn:disabled
{
    background: #D0D0D0;
    color: #8A8A8A;
    cursor: default;
}

/*
=====================================================================
Loader
=====================================================================
*/

#loader_fog
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(28,32,32,0.9);
    z-index: 1000;
}

.loader
{
    margin: 0 auto;
    width: 120px;
    height: 100px;
    text-align: center;
    font-size: 0.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.loader > div
{
    height: 100%;
    width: 8px;
    display: inline-block;
    margin-left: 2px;
    animation: delay 0.8s infinite ease-in-out;
    -webkit-animation: delay 0.8s infinite ease-in-out;
}

.loader .bar1
{
    background-color: #754fa0;
}

.loader .bar2
{
    background-color: #09b7bf;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.loader .bar3
{
    background-color: #90d36b;
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.loader .bar4
{
    background-color: #f2d40d;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.loader .bar5

{
    background-color: #fcb12b;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.loader .bar6
{
    background-color: #ed1b72;
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

@-webkit-keyframes delay
{
    0%, 40%, 100%
    {
        -webkit-transform: scaleY(0.05);
    }

    20%
    {
        -webkit-transform: scaleY(1);
    }
}

@keyframes delay
{
    0%, 40%, 100%
    {
        transform: scaleY(0.05);
        -webkit-transform: scaleY(0.05);
    }

    20%
    {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}

/*
===================================================================== 
Wait Cursor
=====================================================================
*/

.wait_cursor
{
    display: flex;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: wait_cursor_spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: wait_cursor_spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.wait_cursor:before
{
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: wait_cursor_spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: wait_cursor_spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.wait_cursor:after
{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: wait_cursor_spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: wait_cursor_spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes wait_cursor_spin
{
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes wait_cursor_spin
{
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/*
===================================================================== 
Group Box
=====================================================================
*/

.groupbox_no_header
{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #B2B2B2;
    padding: 15px 15px 15px 15px;
}

.groupbox_no_header > div:nth-child(1)
{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.groupbox_no_header > div:nth-child(1) > div:nth-child(1)
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    overflow-x: auto;
}

.groupbox_no_header > div:nth-child(1) > div:nth-child(2)
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}

.groupbox_fixed
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #B2B2B2;
    padding: 0 25px 25px 25px;
}

.groupbox_fixed > div:nth-child(1)
{
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.groupbox_fixed > div:nth-child(1) > div:nth-child(1)
{
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #707070;
}

.groupbox_fixed > div:nth-child(1) > div:nth-child(2)
{
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.groupbox_fixed > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
    font-size: 1em;
    color: #FF0000;
}

.groupbox_fixed > div:nth-child(2)
{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.groupbox_fixed > div:nth-child(2) > div:nth-child(1)
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    overflow-x: auto;
}

.groupbox_fixed > div:nth-child(2) > div:nth-child(2)
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}

.groupbox_dynamic
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #B2B2B2;
    padding: 0 25px 25px 25px;
    overflow: hidden;
}

.groupbox_dynamic > div:nth-child(1)
{
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.groupbox_dynamic > div:nth-child(1) > div:nth-child(1)
{
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #707070;
}

.groupbox_dynamic > div:nth-child(1) > div:nth-child(2)
{
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.groupbox_dynamic > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
    font-size: 1em;
    color: #FF0000;
}

.groupbox_dynamic > div:nth-child(2)
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
}

.groupbox_btn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.groupbox_btn button
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    outline: none;
    appearance: none;
    border: none;
    background-color: transparent;
    text-decoration: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/*
===================================================================== 
Dialog
=====================================================================
*/

.dialog
{
}

.dialog > div:nth-child(1)
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.dialog > div:nth-child(2)
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    min-width: 450px;
    background: #FFFFFF;
    border-radius: 0;
    padding: 30px 35px 25px 35px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 10px 10px 18px 0 rgba(0,0,0,0.35);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 10px 10px 18px 0 rgba(0,0,0,0.35);
}

.dialog > div:nth-child(2) > div:nth-child(1)
{
    display: flex;
    flex-direction: row;
    width: 100%;
    color: #FF8040;
    font-size: 2em;
    font-weight: bold;
}

.dialog > div:nth-child(2) > div:nth-child(2)
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex-grow: 1;
    margin: 15px 0;
    padding: 0 10px;
    flex-wrap: nowrap;
    overflow-y: auto;
}

.dialog > div:nth-child(2) > div:nth-child(3)
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 15px 0 5px 0;
}

.dialog > div:nth-child(2) > div:nth-child(3) > div:nth-child(1)
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}

.dialog > div:nth-child(2) > div:nth-child(3) > div:nth-child(2)
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    margin-left: auto;
}

.dialog_btn
{
    min-width: 100px;
    font-size: 0.9em;
    border: 1px solid #C0C0C0;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px 25px;
    color: #484848;
    background: #E8E8E8;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dialog_btn:hover
{
    background: #D4D4D4;
}

.dialog_btn_blue
{
    min-width: 100px;
    font-size: 0.9em;
    border: 1px solid #009ED4;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px 25px;
    color: #FFFFFF;
    background: #009ED4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dialog_btn_blue:hover
{
    background: #1EBCF2;
}

.dialog_btn_green
{
    min-width: 100px;
    font-size: 0.9em;
    border: 1px solid #32B2B2;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px 25px;
    color: #FFFFFF;
    background: #32B2B2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dialog_btn_green:hover
{
    background: #50D0D0;
}

.dialog_btn_red
{
    min-width: 100px;
    font-size: 0.9em;
    border: 1px solid #DB5844;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px 25px;
    color: #FFFFFF;
    background: #DB5844;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dialog_btn_red:hover
{
    background: #F97662;
}

.dialog_btn_violet
{
    min-width: 100px;
    font-size: 0.9em;
    border: 1px solid #800080;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px 25px;
    color: #FFFFFF;
    background: #800080;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-focus-ring-color: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dialog_btn_violet:hover
{
    background: #BC3CBC;
}