/* Text Color: #152242 */

html {
     font-family: 'Open Sans';
     background-color: #EFF4F6;
}
body {
     margin: 0px;
     /* height: 200vh; */
     border: 1px solid transparent; /*Fixes bug where .content_body's margin-top pulled the body down.*/
     /* width: calc(100vw - 40px); */
}
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
a {
     color: none;
     text-decoration: none;
}

/* Navigation */
nav {
     height: 60px;
     padding: 0 20px;
     background: linear-gradient(#F7F9FA,#F5F8F9);
     box-shadow: 0px -1px 6px 0px rgba(0,0,0,0.5);
     position: fixed;
     width: calc(100vw - 40px);
     z-index: 100;
     overflow: hidden
}
.nav_section {
     height: 100%;
     display: flex;
     align-items: center;
}
.nav_left_section {
     float: left;
}
.nav_right_section {
     float: right;
     width: 218px; /* width of both buttons added togeather then add 10px to that for the space inbtween them.*/
     justify-content: space-between;
}
.nav_text {
     color: #152242;
     font-weight: normal;
}
.nav_button { }

.nav_icon {
     font-size: 30px !important;
     color: #7D8D9F;
     margin-right: 20px;
}
.button_text {
     font-weight: 500;
     font-size: 18px;
     color: #5273F1;
}
.button_icon {
     color: #5273F1;
     margin-left: 12px;
}
#navFireworkName {
     height: 100%;
     display: flex;
     align-items: center;
     -webkit-transform: translateY(60px);
     transition: all 100ms linear;
}

button:not(.ignore_default_css) {
     border-radius: 8px;
     background-color: #E6EAFC;
     border: 1px solid #CFD8FA;
     height: 40px;
     padding: 5px 6px 5px 13px; /*Top, Right, Bottom, Left*/
     cursor: pointer;
     display: flex;
     align-items: center;
     transition: all 200ms linear;
}

button[distructive]:not(.ignore_default_css) {
     /* background: #c31818; */
     /* color: white; */

     background-color: #F6DBDB;
     border-color: #FACFCF;
     color: #E06B4D;
}
button:not([disabled]):not(.ignore_default_css)[distructive] > * { color: #E06B4D; }
button:not([disabled]):not(.ignore_default_css)[distructive]:hover {
     /* background-color: white; color: #c30000; */
     /* background-color: #c31818; */
     /* border-color: #c31818; */
     background-color: #ef3f3f;
     border-color: #ef3f3f;
     color: #fff;
}
button:not([disabled]):not(.ignore_default_css)[distructive]:hover > * { color: #fff; }


button:not([distructive]):not([disabled]):not(.ignore_default_css):hover {
     background-color: #ccd5ff;
     border-color: #a1b5ff;
}
button:not([distructive]):not([disabled]):not(.ignore_default_css):hover > * { color: #0035ff; }
button[disabled]:not(.ignore_default_css) {
     background-color: #e5e8f3;
     border-color: #CFD8FA;
     cursor: default;
}
button:not([distructive])[disabled]:not(.ignore_default_css) > * { color: #3251c74d; }
.delete_button:not([disabled]):hover {
     background-color: #F6DBDB !important;
     border-color: #FACFCF !important;
}
.delete_button:not([disabled]):hover > * { color: #E06B4D !important; }

button:not([distructive]):not([disabled]):not(.ignore_default_css)[inverted]:hover { background-color: #E6EAFC; color: #5273F1; }


/* Body */
.content_body {
     padding: 20px 20px 0 20px;
     margin-top: 60px; /*Offset height of fixed nav*/
}

/* Content */
.content_container {
     border-radius: 8px;
     background-color: #F6F8F9;
     border: 1px solid #DDE2E7;
     overflow: hidden;
}
.content_container:not(:first-child) {
     margin-top: 20px;
}
.content_header {
     height: 55px;
     padding: 0 20px;
     display: flex;
     align-items: center;
     font-weight: 500;
     font-size: 24px;
     color: #636B81;
}
section {
     background: #fff;
     border: 1px solid #DDE2E7;
     padding: 20px;
}
.section_title {
     font-weight: 600;
     font-size: 18px;
     color: #8D94A4;
}
.description_text {
     font-weight: 500;
     font-size: 14px;
     color: #152242;
     padding: 0 20px;
     margin-top: 5px;
}


.details_container {
     display: grid;
     grid-template-areas: "first-left first-right" "second-left second-right" "third-left third-right";
     grid-column-gap: 10px;
     grid-row-gap: 13px;
     padding: 10px 20px 10px 75px; /*Best for big screens*/
     /*padding: 10px 20px 10px 50px;*/ /*Best for medium screens*/
}
.detail_group {}
.detail_title {
     font-weight: 600;
     font-size: 15px;
     color: #959DAE;
}
.detail_value {
     font-weight: 500;
     font-size: 22px;
     color: #152242;
}


grid { display: flex; }
left-column { width: calc(100% / 3); /* 1/3 or 33% */ }
right-column { width: calc(100% / 3 * 2); /* 2/3 or 66% */ }

left-column > section { border-left: none; }
right-column > section { border-right: none; }

left-column > section:last-child { border-bottom: none; }
right-column > section:last-child { border-bottom: none; }

.video_section {
     height: calc(100% - 123px);
}
.video_selection_section {
     height: 60px;
     padding: 10px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}
.description_section {}
.details_section { height: 100%; }

.video_container {
     width: 100%;
     background: #747782;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
}
.video_container::before {
     content: " ";
     display: block;
     padding-top: 75%;
}
#player {
     width: 100%;
}
#player::before {
     content: " ";
     display: block;
     padding-top: 75%;
}

.content_unavalible_container{
     position: absolute;
     left: 0px;
     right: 0px;
     top: 0px;
     bottom: 0px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.content_unavalible_image {
     width: calc(100% - 60px);
}
.content_unavalible_text {
     font-size: 20px;
     color: #fff;
     font-weight: 300;
     margin-top: 20px;
}
.video_selection_button {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2px 12px 4px 12px;
     border-radius: 8px;
     border: 1px solid #fff;
     cursor: pointer;
     transition: background-color 300ms linear;
}
.video_selection_button[disabled] { background-color: #f9f9f9; pointer-events: none; }
.video_selection_button[disabled] > .video_selection_button_text { color: #b8bcc3; }
.video_selection_button[disabled] > .video_selection_button_icon { color: #b8bcc3; }

.video_selection_button[selected] { background-color: #E6EAFC; border: 1px solid #CFD8FA; }
.video_selection_button[selected] > .video_selection_button_text { color: #5273F1; }

.video_selection_button:hover { background-color: #dae0ea; }
.video_selection_button:hover > .video_selection_button_text{ color: #575d67; }

.video_selection_button_icon { font-size: 32px !important; }
.video_selection_button_text {
     font-size: 15px;
     font-weight: 500;
     color: #959DAE;
     letter-spacing: 0.2px;
}



/* Footer content */
.under_content_container {
     display: flex;
     justify-content: space-between;
     padding: 0 20px;
     margin-top: 2px;
}
.powered_by_text {
     font-weight: 500;
     font-size: 11px;
     color: #959DAE;
     letter-spacing: 0.15px;
}
.view_custom_data_container {
     display: flex;
     /* align-items: center; */
     cursor: pointer;
}
.view_custom_data_text {
     font-size: 11px;
     letter-spacing: 0.15px;
     color: #5273F1;
     font-weight: 500;
}
.view_custom_data_icon {
     /* color: #959DAE; */
     color: #9ba7bf; /*Makes it look like the same font-size as the text*/
     /* font-size: 20px !important;
     margin-top: -2px;
     margin-right: 2px; */
     margin-top: -4px;
     margin-right: 0px;
}

#delete_modal {
     position: absolute;
     top: 0px;
     left: 0px;
     right: 0px;
     bottom: 0px;
     background: rgba(0,0,0,0.1);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 101;
     cursor: pointer;
}
.delete_modal_content {
     width: 525px;
     /* height: 400px; */
     background: #F6F8F9;
     border: 1px solid #DDE2E7;
     border-radius: 12px;
     box-shadow: 1px 1px 13px 1px rgba(0,0,0,0.5);
     overflow: hidden;
     cursor: default;
}
.delete_modal_header {
     font-weight: 600;
     font-size: 24px;
     color: #636B81;
     height: 75px;
     display: flex;
     align-items: center;
     padding-left: 30px;
}
.delete_modal_body {
     /* width: 100%; */
     width: calc(100% - 40px);
     padding: 0 20px;
     /* height: calc(100% - 75px); */
     background: #fff;
     border-top: 1px solid #EBEFF4;
}
.delete_modal_container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding-top: 8px;
}
.delete_modal_text {
     margin: 0px;
     color: #152242;
     font-size: 17px;
     font-weight: 500;
}
.delete_modal_buttons_container {
     display: flex;
     justify-content: flex-end;
     width: 100%;
     margin-top: 17px;
     margin-bottom: 10px;
}
.delete_modal_button {
     border-radius: 8px;
     background-color: #E6EAFC;
     border: 1px solid #CFD8FA;
     height: 40px;
     padding: 5px 6px 5px 13px; /*Top, Right, Bottom, Left*/
     cursor: pointer;
     display: flex;
     align-items: center;
}
.distructive {
     background-color: #F6DBDB;
     border-color: #FACFCF;
     color: #E06B4D !important;
}

.errorText {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     background-color: #f5e0e0;
     border-color: #FACFCF;
     color: #E06B4D;
     font-size: initial;
}
.successText {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     color: #3c763d;
     background-color: #dff0d8;
     border-color: #d6e9c6;
     font-size: initial;
}
.warningText {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     color: #8a6d3b;
     background-color: #fcf8e3;
     border-color: #faebcc;
     font-size: initial;
}


[type=checkbox]:not(.ignore_default_css) {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     border: 1px solid #DFE1E1;
     background-color: #FFF;
     border-radius: 3px;
     margin-left: 12px;
     cursor: pointer;
}
[type=checkbox]:not(.ignore_default_css):checked {
     background: #5273F1;
}
[type=checkbox]:not(.ignore_default_css):checked::after {
     content: '\2714';
	font-size: 14px;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
	/* position: absolute; */
	/* top: 0px; */
	/* left: 3px; */
	/* color: #99a1a7; */
}

input[type="text"]:not(.ignore_default_css) {
     height: 40px;
     border-radius: 8px;
     width: 300px;
     background-color: #e8ebf7;
     font-family: 'Open Sans';
     font-size: 14px;
     text-indent: 8px;
     border: 1px solid #d5ddfb;
     padding: unset;
}

#column_selection_container, .column_selection_container {
     display: flex;
     justify-content: space-around;
     margin-top: 20px;
}

#column_selection_container > label {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-width: 90px;
     cursor: pointer;
}

#column_selection_container label span {
     margin-left: 10px;
}


#custom_field_column_main_section {
     background-color: #F6F8F9;
     border: 1px solid #DDE2E7;
     padding: 20px;
     border-radius: 8px;
     margin-top: 20px;
}
#custom_field_column_main_section > span {
     font-weight: 500;
     font-size: 20px;
     color: #636B81;
     margin-bottom: 20px;
     display: block;
}

#custom_field_column_selection_container {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
}

#custom_field_column_selection_container > label {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-width: 90px;
     margin: 0 20px 15px 0;
     cursor: pointer;
}

#custom_field_column_selection_container label span {
     margin-left: 10px;
}

#custom_field_column_empty_state {
     color: #636B81;
}

.draggable_column_container::before {
     content: 'drag_indicator';
     font-family: 'Material Icons';
     position: absolute;
     top: 0px;
     left: -5.1rem;
     bottom: 0px;
     width: 5rem;
     background-color: rgba(0,0,0,0.4);

     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 36px;
     color: white;
     cursor: pointer;

     transition: all 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.draggable_column_container:hover::before {
     left: -1rem;
}

.destination_ghost { 
     border: 1px dashed gray !important;
     background-color: rgba(155,155,155,0.3) !important;
}
.destination_ghost > * {
     display: none;
}
/* .destination_ghost::after {
     content: '';
     position: absolute;
     top: 0px;
     left: 0px;
     bottom: 0px;
     right: 0px;
     background-color: green;
     z-index: 2;
} */

.show_icon_on_hover > i.material-icons {
     opacity: 0%;
     transition: opacity 300ms ease-out;
}
.show_icon_on_hover:hover > i.material-icons {
     opacity: 100%;
}

.distructive {
     background-color: #F6DBDB;
     border-color: #FACFCF;
     color: #E06B4D !important;
}

.error_text {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     background-color: #f5e0e0;
     border-color: #FACFCF;
     color: #E06B4D;
     font-size: initial;
}
.warning_text {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     color: #8a6d3b;
     background-color: #fcf8e3;
     border-color: #faebcc;
     font-size: initial;
}
.info_text {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     color: #31708f;
     background-color: #d9edf7;
     border-color: #bce8f1;
     font-size: initial;
}
.success_text {
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
     border: 1px solid;
     color: #3c763d;
     background-color: #dff0d8;
     border-color: #d6e9c6;
     font-size: initial;
}

loading-indicator[type=circle] > .label {
     background-color: #f6f8f9;
}

.cloak {
     position: fixed; 
     top: 0px; 
     left: 0px; 
     bottom: 0px; 
     right: 0px; 
     z-index: 1000000; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     flex-direction: column; 
     transition: opacity 800ms ease-out;
}

.loading_spinner {
     border: 8px solid #CFD8FA;
     border-top: 8px solid #5273F1;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     animation: spin 2s linear infinite;
}
   
@keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
}